gulp-sass で .css ファイルをインラインでインポートする方法を本腰入れて調べた

node-sass の仕様変更だかなんだかで、.css ファイルを @import "example.css" のように読み込もうとすると、以下のようなエラーが出るようになった。

DEPRECATION WARNING on line 4, column 8 of /Users/Neo/src/styles/index.scss:
Including .css files with @import is non-standard behaviour which will be removed in future versions of LibSass.
Use a custom importer to maintain this behaviour. Check your implementations documentation on how to create a custom importer.

node-sass-package-importer というモノを入れると回避できるという記事があったのだが、このワーニングが消せず。

node-sass の方にも GitHub Issues が上がっている。

コレをみると、どうも @import "example.css" のような読み込み方は止めて、@import url(example.css) のように読み込んでトランスパイルし、素の CSS に戻したら別の Minify 系ツールでインライン化すればええやん、と書かれていた。

If you wish to inline the contents of foo.css into the output CSS file then we recommending using a CSS minification step in you build process.

ということで、gulp-sass を使ったトランスパイルのタスクに、gulp-clean-css を追加して、CSS ファイルの @import のみ後からインライン化するようにしてみた。

まずソースコードは以下のように変更した。

// styles.scss

// 元の書き方 : コレだと Deprecation Warning が発生する
// @import '../../node_modules/@neos21/neos-normalize/neos-normalize';

// 以下のように直す : この部分は gulp-clean-css でインライン化する
@import url('../../node_modules/@neos21/neos-normalize/neos-normalize.css');

// SCSS ファイルをインポートするところはそのまま変更なし
@import './main';

次に、gulp-clean-css をインストール。

$ npm i -D gulp-clean-css

さらに、Gulp タスクを以下のように変更した。

// gulpfile.js

// gulp-sass・gulp-clean-css などは gulp-load-plugins で読み込む
const $ = require('gulp-load-plugins')

gulp.task('css', () => {
  return gulp
    .src(['./src/styles/index.scss'])  // エントリポイント
    .pipe($.plumber(function(error) {
      return this.emit('end');
    }))
    .pipe(
      // gulp-sass によるトランスパイル
      $.sass({
        outputStyle: 'compressed'
      })
      .on('error', $.sass.logError)
    )
    .pipe($.cleanCss())              // gulp-clean-css : import('.css') 部分をインライン化する・ついでに UTF-8 BOM を除去してくれる
    .pipe($.rename('./styles.css'))  // リネームする
    .pipe(gulp.dest('./dist'));      // ./dist/styles.css を出力する
});

$.cleanCss() パイプを追加した。

gulp-clean-css の副次的な効果として、

といったことが挙げられる。

コレで Gulp タスクを実行しても node-sass が DEPRECATION WARNING を出力しなくなったので、良き良き。