VSCodeでDart Sassが使える!DartJS Sass Compiler and Sass Watcher

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」の内容を変更しただけではダメで、何も変更を加えていなくても、「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,
IE10

Dartsass: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に移行しておくべきでしょう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です