Sassで使っていた@importが、遅くとも2021年10月1日には廃止されるそうです。
その為今後は@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の中身も変更します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
// gulpプラグインの読み込み const gulp = require("gulp"); // Sassをコンパイルするプラグインの読み込み const sass = require("gulp-sass"); const fiber = require('fibers'); /* select use compiler */ sass.compiler = require("sass"); // Dart Sass = "sass" // style.scssの監視タスクを作成する gulp.task("default", function() { // ★ style.scssファイルを監視 return gulp.watch(["scss/**/*.scss"], function() { // style.scssの更新があった場合の処理 // style.scssファイルを取得 return ( gulp .src(["scss/**/*.scss"]) // Sassのコンパイルを実行 .pipe( sass({ outputStyle: "expanded" }) // Sassのコンパイルエラーを表示 // (これがないと自動的に止まってしまう) .on("error", sass.logError) ) .pipe(sass({ // sass option fiber: fiber, outputStyle: "expanded" })) // cssフォルダー以下に保存 .pipe(gulp.dest("css")) ); }); }); |
sass.compiler = require(“sass”);
上記でDart Sassを使うことを明示しています。
fiberはあまり分かりませんが処理の高速化に必要なようです。
@importから@useへ
読み込み方法は下記のようになります。
//LibSass
@import “test”;hoge {
color:$text-color;
}
@import “test”;hoge {
color:$text-color;
}
//Dart Sass
@use “test”;hoge {
color:test.$text-color;
}もしくは下記のようになります。
@use “test”;hoge {
color:test.$text-color;
}もしくは下記のようになります。
@use “test” as var;
hoge {
color: var.$text-color;
}
@importを@useで書き換え、変数は読み込んでいるファイル名か、上記の場合「名前空間」と呼ばれるvar.を直前に追加します。
以上がDart Sassの導入と基本的な使い方になります。
参考にした記事
はにわまんさんの記事が今回大変参考になりました。
Dart Sass（@use）の基本的な書き方と@importから乗り換える方法 | HPcode（えいちぴーこーど）
Sassでファイルを呼び出す際に使っていた@importは廃止される予定でして、…
haniwaman.com