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

LibSassが廃止され「@import」が使えなくなり、「@use」や「@forward」に変更しなければばらなくなりました。
しかし、ボクが使っている「Live Sass Comoiler」ではDart Sassが対応していないらしく「@use」がエラーになってしまいました。
分割していたファイルを一つにまとめてしまえば、最悪、何かとなるかと思いつつ、放置していましたが、ついに見つけました!

「DartJS Sass Compiler and Sass Watcher」

名前からして、Dart Sassに対応してそうなプラグインじゃないですか。

しかも「Autoprefixer」が使える!!
最初に使ったプラグイン「Easy Sass」で「Autoprefixer」使えなかった苦い経験もあるので…、ここはしっかりチェックしました。

「Dart Sass」をテストする

とりあえず、テストしてみます。
前回、「Live Sass Comoiler」でエラーになったものと同じものでやってみました。

■_variables.scss
$main-color: #f00;

「@use」を使って「_variables.scss」を「style.scss」に読み込んでみます。

■style.css
@use "variables";
.hoge{
  color: variables.$main-color;
}

無事、コンパイルされました!!
「Dart Sass」への移行は、これで問題なさそうです。

「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 Comoiler」では「~(チルダ)」を付けると、相対パスで設定できたのですが、「DartJS Sass Compiler and Sass Watcher」では絶対パスでしか設定できないようです。

さいごに

LibSassの廃止予定は遅くとも2022年10月1日ということなので、まだ余裕はあると思いきや、「@import」は遅くとも2021年10月1日は非推奨になります。
早めにDart Sassに移行しておくべきでしょう。

コメントを残す

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