ふと立ち上がった瞬間に、ホットマットを猫に奪われる@It_is_Rです。
全然どいてくれない。
今回は gulp を使って、 Sass ファイルから Normalize.css などをインポート（読み込む）する方法を紹介します。
通常、Sass で CSS をインポートしても 外部から CSS を読み込む形(@import url(…)みたいな形)になってしまいます。
今回やりたいのは、 Sass のコンパイル後に CSS のソースも一緒に組み合わせたいわけです。
Normalize.css や sanitize.css をインストール
まず、 Normalize.css や sanitize.css をインストールしてみましょう。
Normalize.css
Normalize.css のインストールです。
$ npm install --save normalize.css
sanitize.css
sanitize.css のインストールです。
$ npm install --save sanitize.css
gulp-postcss と、postcss-import を使う
Sass で CSS をインポートする方法として、今回は gulp-postcss と、postcss-import を使おうと思います。
インストール
$ npm install --save-dev gulp-postcss postcss-import
gulpfile.js
gulpfile.js は以下のようにします。
'use strict';
const
gulp = require('gulp'),
sass = require('gulp-sass'),
postcss = require("gulp-postcss"),
cssImport = require("postcss-import");
gulp.task('sass', () => {
const plugins = [
cssImport({
path: [ 'node_modules' ]
})
];
return gulp.src('theme/src/sass/**/*.sass')
.pipe(sass())
.pipe(postcss(plugins))
.pipe(gulp.dest('vccw/wordpress/wp-content/themes/mytheme'));
});
読み込む( @Import )
では、 Sass ファイルから CSS を読み込んでみましょう。
npm でインストールしたものは、node_modules フォルダに追加されていきますが、これを使えばいちいち ../../node_modules/ とか入力する必要もありません。
style.sass
//好きなものをインポートしてください。 @import "normalize.css/normalize.css" @import "sanitize.css/sanitize.css"
まとめ
Normalize.css や sanitize.css を使いたいと思っても、インポートがうまくできずに困ったという人もいたのではないでしょうか。
今回は Sass から CSS ファイルをインポートする方法を紹介しました。この記事が誰かのお役にたてればと思っております。
