モチベーション
node-sass 、結構イライラポイントが多くて、代替手段があるなら乗り換えたいなあなんて思ってたところに dart-sass がナウでヤングだぜみたいな話を小耳に挟んだので、使ってみることにした。
ちなみに node-sass に感じていたイライラポイントは、以下の通り。
- インストールが遅い
- Node.js のバージョンが上がりたてのとき、だいたいインストールで死ぬ
dart-sass がナウでヤングな理由については、 Feature Watch: CSS Imports and CSS Compatibility とかを読んで欲しい。
要約すると、LibSass や Ruby Sass に搭載されていない機能が、先行的に積まれてるみたいなことらしい。( プレーンな CSS のインポートをサポートするとかなんとか)
モチベとしては、「 node-sass でコケたときに、 node-gyp ガー！ python ガー！みたいなところで消耗しなくてよくなり、なおかつ、最新の機能が使えるなら使ってみるか」みたいな感じである。
sass-loader で dart-sass を使う
dart-sass だけためしても良かったけど、せっかくなので webpack 絡めて。
1. インストール
とりあえず、以下をインストールする。
$ npm i webpack webpack-cli sass sass-loader style-loader fibers --save-dev
sass というパッケージが dart-sass のことである。
fibers というパッケージは 処理速度を上げるために必要らしい。
その他は、おなじみのパッケージである。
2. webpack.config.js を書く
node-sass のときとの違いは、sass-loader の options で sass を指定したのと、fiber を設定したことである。
先ほども説明したとおり、 sass パッケージは dart-sass のことである。
fibers は dart-sass で renderSync() を実行したときに render() の二倍以上も処理時間がかかってしまうのを防ぐためとかなんとかって近所の猫が言ってた。(英語分からなかった、つらい)
詳しくは Sass: Dart Sass の 2. JAVASCRIPT LIBRARY の項を読んで欲しい。英語が読める人には正解が分かる。
const path = require('path')
const Fiber = require('fibers')
module.exports = {
entry: './assets/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './dist/assets')
},
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'sass-loader',
options: {
implementation: require('sass'),
fiber: Fiber
}
}]
}]
}
}
3. 実行する
あとは npx webpack とかするとコンパイルできた。
まとめ
ややこしポイントとして、dart-sass は sass というパッケージ名で npm に上がっているというのがある。気をつけて欲しい。
しばらく使ってみて、不便なところがないかなど検証してみたいと思っている。