LibSassが廃止され「@import」が使えなくなり、「@use」や「@forward」に変更しなければばらなくなりました。
しかし、ボクが使っている「Live Sass Compiler」ではDart Sassが対応していないらしく「@use」がエラーになってしまいました。
分割していたファイルを一つにまとめてしまえば、最悪、何かとなるかと思いつつ、放置していましたが、ついに見つけました！
「DartJS Sass Compiler and Sass Watcher｣」
名前からして、Dart Sassに対応してそうなプラグインじゃないですか。
しかも「Autoprefixer」が使える！！
最初に使ったプラグイン「Easy Sass」で「Autoprefixer」を使えなかった苦い経験もあるので…、ここはしっかりチェックしました。
「Dart Sass」をテストする
とりあえず、テストしてみます。
前回、「Live Sass Compiler」でエラーになったものと同じものでやってみました。
■_variables.scss
$main-color: #f00;「@use」を使って「_variables.scss」を「style.scss」に読み込んでみます。
■style.scss
@use "variables";
.hoge{
color: variables.$main-color;
}無事、コンパイルされました！！
「DartJS Sass Compiler and Sass Watcher」の注意点
「Dart Sass」への移行は、これで問題なさそうと思っていたのですが、注意が必要です。
「_variables.scss」の「$main-color」の値を変更しても、反映されません。
CSSファイルを確認してみると、更新日時が変わっていませんでしたので、「style.scss」を保存し直してみたら、反映されました。
どうやら、「@use」で読み込まれているファイルを変更したら、「@use」で読み込んでいるファイルを保存し直さないと、コンパイルされないようです。
今回のテストで使用した例でいうと、「_variables.scss」の内容を変更したので、「_variables.scss」だけを保存するだけではダメで、何も変更を加えていなくても、「style.scss」を保存し直さないと、 「style.css」をコンパイルし直してくれません。
「style.scss」の適当なところで、改行して、元に戻して、保存。
などのように、「style.scss」を更新しないと、いつまで経っても、新しい内容の「_variables.scss」に更新されてない｢style.css｣のままです。
「DartJS Sass Compiler and Sass Watcher」の設定
「DartJS Sass Compiler and Sass Watcher」の設定について、少し説明します。
Dartsass: Auto Prefix Browsers List
「Autoprefixer」のブラウザのリストです。
デフォルトの設定は下記のようになっています。
> 1%,
last 2 versions特に問題なければデフォルトのままで十分ですが、ボクはそこに｢IE10｣も念のため追記しています。
> 1%,
last 2 versions,
IE10Dartsass:Debug
プラグイン公式ページによると、「この拡張機能の開発者にのみ最適です。エンドユーザーの場合は、これを完全に無視してください。」とのことです。
特に設定する必要はなさそうです。
Dartsass:Disable Auto Prefixer
自動プレフィックスライブラリを使用したpostcss処理を無効にします。
おそらく、チェックを入れる（trueにする）と「Autoprefixer」が使えなくなるのではないでしょうか？
なので、設定する必要はないと思います。
Dartsass:Disable Compile On Save
保存するたびにコンパイルが無効になります。
設定する必要はないでしょう。
Dartsass:Disable Source Map
ソースマップファイルの生成（* .map）を無効にするフラグ。
mapファイルなんて、いらないよって方は設定しましょう。
※mapファイルがないと、開発者ツールでsassファイルを見た時、どこに何を書いたかわからなくなりますので、開発中は保存しておいた方がいいと思います。
Dartsass:Enable Start With Underscores
アンダースコアで始まるファイルのコンパイルを有効にします。
アンダースコアで始まるcssファイルが欲しいならば設定した方がよいでしょう。
個人的には、アンダースコアで始まるファイルがコンパイルされず、必要なcssファイルだけがコンパイルされることが、Sassのいいところでもあると思っているので、設定する必要はないと思います。
Dartsass:Encoding
デフォルトで｢utf-8｣になっているので、特に変更する必要はありません。
Dartsass:includePath
sassコンパイルのincludePathとして指定するディレクトリのセット。
特に設定する必要はありません。
Dartsass:Node Exe Path
PATHをnode.exe実行可能ファイルに設定します。
これも特に設定する必要はありません。
Dartsass:Output Format
scssコンパイラによって生成される出力ファイルの形式を選べます。
- both：コンパイルされたcssファイルと縮小されたファイルの両方を生成します。デフォルト値。
- cssonly：コンパイルされたcssファイルのみを生成し、縮小されたファイルは生成しません。
- minified：縮小されたcssファイルのみを生成し、コンパイルされたcssファイルは生成しません。
Dartsass:Pause Interval
別のscssコンパイルを開始する前に、間隔（秒単位）を一時停止して、頻繁にコンパイルせず、リソースを占有します。デフォルトは3秒。
Dartsass:sassBinPath
プラグイン公式ページによると、「時計機能を動作させるには、sassバイナリをローカルまたはグローバルにインストールする必要がある場合があります。」というもとなのですが、ちょっとよくわかりません。
他の記事でも、特に設定する必要はないとありましたので、設定する必要なし。
Dartsass:Target Directory
生成されたcssファイルを書き込むためのターゲットディレクトリをどこにするか設定できます。
「css」と設定すれば、「css」ディレクトリに保存されます。
※「css」ディレクトリを用意していなくても、ディレクトリも一緒に生成してくれます。
これは、絶対パスまたはプロジェクトルートを基準にしたディレクトリにで設定することができます。
「Live Sass Compiler」では「~（チルダ）」を付けると、相対パスで設定できたのですが、「DartJS Sass Compiler and Sass Watcher」では絶対パスでしか設定できないようです。
最後に
LibSassの廃止予定は遅くとも2022年10月1日ということなので、まだ余裕はあると思いきや、「@import」は遅くとも2021年10月1日は非推奨になってしまいます。
早めにDart Sassに移行しておくべきでしょう。