ふと立ち上がった瞬間に、ホットマットを猫に奪われる@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 ファイルをインポートする方法を紹介しました。この記事が誰かのお役にたてればと思っております。