Sassの@importでreset.cssやnormalize.cssを読み込む

Sass の @import によるインライン展開は .css 拡張子に対応していないので、.css ファイルしか用意されてない HTML5-Reset や normalize.css、sanitize.css などはそのままではインポートできません。
※.css ファイルを指定すると CSS の @import url(...) になってしまいます。

.scss バージョンを公開している人もいますができれば公式のものを使いたいし、自分でリネームしてリポジトリに置くというのも避けたいところです。

これらの条件をクリアするために、私は Bower でインストールしたあと gulp で .scss にリネームしていたのですが、node-sass-package-importer を使うとそんな手間もいらず簡単にインポートすることができたので紹介します。

インストール

node-sass-package-importer のほか、使いたい CSS パッケージをインストールします。

$ npm i -D node-sass-package-importer
$ npm i -S html5-reset normalize.css

Sassのオプションに指定する

node-sass-package-importer を Sass の importer オプションに指定します。importer は @import の処理をフックして独自処理を行うプラグイン機構です。
基本的な使い方は node-sass-package-importer のサイトに書いてあるので、ここでは gulp タスクとして組み込む方法を書いておきます。

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var packageImporter = require('node-sass-package-importer');

gulp.task('build:sass', function() {
  return gulp.src('path/to/sass/**/*.scss')
    .pipe(sass({
      importer: packageImporter({
        extensions: ['.scss', '.css']
      })
    }))
    .pipe(gulp.dest('path/to/css/'));
});

CSSファイルをimportする

基本的にはパッケージ名の頭に ~ をつけて import するだけです。

@import "~normalize.css";
@import "~html5-reset";

node-sass-package-importer はインポートするパッケージの package.json を見て取り込むファイルを判断しています。具体的には以下のいずれかのキーに設定された CSS/Sass ファイルを読み込みます。sass scss style css main.sass main.scss main.style main.css main

この設定がない場合やそれ以外のファイルをインポートしたいときは、パッケージ名に続けてファイルパスを指定します。例えば、Bootstrap の reboot.css をインポートするには以下のように指定します。

@import "~bootstrap/dist/css/bootstrap-reboot";