VSCodeで@useを使えるようにするプラグイン「DartJS Sass Compiler and Sass Watcher」

2022 12/18

8月 18, 2022 12月 18, 2022

Sassで分割ファイルを読み込むために使っていた@importですが、今後廃止される予定と今更ながらに知りました。
今後はそれに代わって、@useと@fowardで対応できるとのこと。
しかし、VSCodeで使えるようにするには色々と設定変更が必要で、私はかなり時間がかかってしまいました💦
結論、「DartJS Sass Compiler and Sass Watcher」という拡張機能で無事に設定できたので、その方法をまとめておきます。

お世話になっていた拡張機能「Live Sass Compiler」では対応できない！

最初は、浅はかにも@importを@useに書き換えたらいいのかな～とか思っていた私💧
ですが、当然それではうまくいきませんでした。
私は勉強不足なのですが、そもそもsassには種類がある・・・らしい。
これまで分割したsassファイルを読み込む際に@importを使えていた「LibSass」が廃止(2022/10予定)となる。
そして変わって推奨されている「DartSass」では@useと@fowardを使っていくということなのですが。
これまでお世話になってきたメジャーな拡張機能「Live Sass Compiler」はこのDartSassに対応していないらしいです。
そこで代わりに使えるのが「DartJS Sass Compiler and Sass Watcher」という拡張機能です！

「DartJS Sass Compiler and Sass Watcher」の基本設定

参考にさせていただいたのは、こちらの記事。
まず上記の拡張機能をインストール。
「拡張機能の設定」に進む。
とりあえず、すべての制作に影響するのは避けたいので「ユーザー」ではなく「ワークスペース」を選びました。
右上のアイコンから「setting.json」を開いて、下記を記述。

{
    "dartsass.targetDirectory": "css", //出力するフォルダを指定
    "dartsass.outputFormat": "cssonly", //cssを出力するフォーマット cssonly、minified、bothの３つから選ぶ
    "dartsass.autoPrefixBrowsersList": [ //Autoprefixerの指定
        "> 3% in JP",
        "ie 11",
        "android 4.4",
        "last 2 versions"
    ],
    "dartsass.disableSourceMap": true //sourcemapを出力させるかどうか。trueはさせない。 
}

上記のサイト様を参考にさせていただきましたが、ベンダープレフィックスの設定はグレーアウト状態になってしまい、現在はできないっぽい？
拡張機能の設定の方からも項目がなくなっているみたいです・・・。

パーシャルファイルを変更した場合も自動でstyle.cssを更新させる

基本設定はできたものの、この状態では分割ファイルを更新しても自動でコンパイルされませんでした。
私はFLOCSSでコーディングしているので、パーシャルファイルが大量にあります。
毎回style.scssを手動で保存しないといけないのは面倒すぎる！
なので、パーシャルファイルもwatchの対象になるように設定していきます。

node.jsのインストール
sassのインストール
「DartJS Sass Compiler and Sass Watcher」にsassまでのパスを登録

上記サイト様を参考にして、設定していましたが、sass.jsまでのパス設定は「拡張機能の設定」→「dartsass:sass bin path」から設定。
今回は「node_modules」をルート直下に作ったので、パスは「node_modules/sass/sass.js」と入力。

ここが結構時間取られてしまった所でした。
なぜならパスを設定しても、ずっとエラーメッセージが出ていたから💧
「path ○○ does not exist」とか言われて・・・。
なんで～～💦と検索していたら、こちらのサイト様にたどり着きました。

設定が完了してもエラーが発生する場合があります。

その際はVSCodeを再起動すると正常に設定が反映されます。
https://shuu1104.com/2021/09/4258/#toc9

ええ・・・。それだけ・・・？
はい、VSCodeを開きなおしてみたら、エラーメッセージは消えていました(笑)
そしてsassフォルダ右クリック→「DartSass: Sass Watch」をクリック！
ちゃんとパーシャルファイルの変更が反映されるようになりました‼
最後のエラーで時間を無駄にした・・・。

まとめ

拡張機能をこれまで使っていたものから切り替えるために時間はかかりましたが、なんとか@importから@useに移行できるようになりました。
今回はワークスペース単位での設定にしたため、今後サイトを作る際には都度「sassのインストール」と「DartJS Sass Compiler and Sass Watcher」の設定が必要です。