2021年9月 | SHOUGO MORI

Sassで使っていた@importが、遅くとも2021年10月1日には廃止されるそうです。 https://sass-lang.com/blog/the-module-system-is-launched#future-plans その為今後は@importの代わりとなる、「@use」「@fowerd」が推奨されています。 今回は「@use」を使うためにLibSassからDart Sassへ移行したので、その方法を書き残していきます。 Dart Sassとは LibSass = C++製であり、もっとも広く使われている。 Dart Sass = Dart製。こちらが公式推奨で@useが使えます。 Sassの新機能は順次Dart Sassに実装されていきます。 Dart Sassを使う 下記のコマンドを実行し、必要なものをインストールします。 npm install --save-dev sass fibers gulpfile.jsの中身も変更します。 [crayon-673ee4ca1adda410787514/] sass.compiler = require("sass”); 上記でDart Sassを使うことを明示しています。 fiberはあまり分かりませんが処理の高速化に必要なようです。 @importから@useへ 読み込み方法は下記のようになります。 //LibSass @import “test”;hoge { color:$text-color; } //Dart Sass @use “test”;hoge { color:test.$text-color; }もしくは下記のようになります。 @use “test” as var; hoge { color: var.$text-color; } @importを@useで書き換え、変数は読み込んでいるファイル名か、上記の場合「名前空間」と呼ばれるvar.を直前に追加します。 以上がDart Sassの導入と基本的な使い方になります。 参考にした記事 はにわまんさんの記事が今回大変参考になりました。 https://haniwaman.com/dart-sass/#Gulp