gulp-scssでimportを１度だけ行うために node-sass-once-importer を使用する

個別にscssを提出したいけど総括したscssも生成したい・・・みたいなケースのとき、@importは一度だけ行いたいケースがある。例えば

style.scss

@import "reset";

@import "components/**/*.scss";

components/hoge.scss

@import "reset";

.hoge {
  // なんか
}

成果物としては、総括したstyle.cssと個別のhoge.css,fuga.css,piyo.css ... etc両方を提出したいが、reset.scssの読み込みは一度だけ行いたい・・・みたいなケースがあった。

通常のscssのコンパイルでは上記の２ファイルの例だと@import は２回実行されるため、 style.css下記のようになる

style.css

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe /* ... */

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe /* ... */

.hoge {
  /* なんか */
}

node-sass のオプションにはimporterというオプションがあり、これに node-sass-once-importer を渡してやれば@importを一度だけ行うようになる。

例えば、gulp-sassでコンパイルする場合は下記のようにする。

const gulp = require('gulp')
const sass = require('gulp-sass')
const onceImporter = require('node-sass-once-importer')

sass.compiler = require('node-sass')

gulp.task('sass', () => {
  return gulp.src('src/**/*.sass')
    .pipe(sass({ importer: onceImporter() }).on('error', sass.logError))
    .pipe(gulp.dest('dist'))
})

以下のようなコンパイル結果となる

style.css

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe /* ... */

.hoge {
  /* なんか */
}

（gulp-sass-globと用途が被るが） node-sass-once-importer は node-sass-magic-importer の子プラグインとなっており、こちらはフィルタリングなどの便利機能が存在するため、興味があるならこちらも確認されたい。