Help us understand the problem. What is going on with this article?

sass-loader で dart-sass を使う

モチベーション

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 の項を読んで欲しい。英語が読める人には正解が分かる。

webpack.config.js
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-sasssass というパッケージ名で npm に上がっているというのがある。気をつけて欲しい。

しばらく使ってみて、不便なところがないかなど検証してみたいと思っている。

参考

0x50
コーダーです。インターフェイス周りのデザインや実装をやります。フロントエンドからサーバーサイドまで、色んな領域に足を突っ込んでは引き抜いてを繰り返しています。
http://p1ch.jp
dena_coltd
    Delight and Impact the World
https://dena.com/jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away