RX100で撮り歩くブログ

RX100やRollei B35で写真を撮ったり何やかんやするブログ

gulp-sassをNode SassからDart Sassへ移行する

Node Sassは非推奨でDart Sassの使用を推奨されているということでgulp-sassでDart Sassへ移行してみました。

Dart Sassを使うと @import の代わりに @use が使えるようになります。 まだ先の話にはなりますが(2021年6月現在)、2022年10月1日には @import が廃止予定です。

sass-lang.com

gulp-sassはそのまま使うとNode Sassになるので @use を使うとimport元のCSSをバンドルせずに、ただの @use './hoge.scss' みたいなテキストになっていしまうので、Dart Sassに対応してみます。

手順

Dart Sassは sass というモジュールで使用できます。 fibers というのはコンパイル速度を上げてくれるモジュールです。なくても動きますが、速度を上げてくれるなら入れておいた方が得でしょう。

yarn add sass fibers -D

gulp

Sassに関係ある部分だけ書き出すと以下のようになります。普段PostCSSと組み合わせたり、plumberを使っていますがそれらのコードは省略してます。

const sass = require('gulp-sass')
sass.compiler = require('sass')

const compileScss = (done) => {

  src(`${config.tasks.scss.src}`)
    .pipe(
      sass({
        outputStyle: compressed,
        fiber: fibers
      }).on('error', sass.logError)
    )
    .pipe(dest(config.tasks.scss.dest))
  done()
}

outputStyleでエラーが

Node Sassを使っているときにアウトプットの形式に nested を選択していたんですが、Dart Sassでは expandedcompressed の2パターンしかないみたいです。

sass-lang.com

他にもDart Sassにすることによって書き方が変わるところがあるかもしれないですね。それは使いながら勉強していきます。

最近の環境構築事情を知るために作ってるリポジトリです。Sass以外にも書いてますが、よかったら参考にしてください

github.com