VSCodeの拡張機能「Live Sass Compiler(Fork)」でDart Sassのコンパイルを試す

VSCode（Visual Studio Code）の拡張機能に Live Sass Compilerという有名なSassコンパイラーがあるのですが、Dart Sassに対応していないためモヤモヤしていたところ、Forkされた Live Sass Compiler(Fork)を見つけました。

上記URLにアクセスすると全く同じように見えますが、Forkは製作者名が「Glenn Marks」という方になっています。今回はこちらを試してみます。

拡張機能のインストール

拡張機能からglenn2223.live-sassで検索するとLive Sass Compilerが表示されるのでインストールします。
もしくはVSCode上でCtrl + Pを押してinstall glenn2223.live-sassを入力してもOKです。

プロジェクトの作成

Live Sass Compiler を動作させるには、プロジェクト（ ディレクトリ ）で管理させる必要があるので、以下の構成でlive-sass-dartディレクトリをVSCodeに読み込ませます。

live-sass-dart/
 ├─ public/
 │   └─ assets/
 │       └─ css/
 │           └─ コンパイルされたcss
 │
 └─ src/
     └─ assets/
         └─ scss/
             ├─ _variable.scss
             ├─ layout.scss
             └─ home.scss

scssファイルの作成

src/assets/scss/ディレクトリにlayout.scssと@useで読み込む設定ファイル_variable.scssを作成します。
home.scssは好みで。

// 設定 - _variable.scss
$font_color: #262f2d;
$bg_color: #2aa47A;

// Layout - layout.scss
@use "variable" as vars;

body {
  font-size: 1.6rem;
  color: vars.$font_color;
  background: vars.$bg_color;
}

// Home - home.scss
body {
  font-size: 2rem;
}

Live Sass Compilerの設定

Live Sass Compilerのデフォルト設定では、cssファイルがscssファイルと同じディレクトリに出力されるため設定を変更します。

下図のようにLive Sass Compiler の拡張機能の設定を開きます。

ユーザーとワークスペースのタブがありますが、プロジェクトごとに設定をしたいのでワークスペースを選択します。
設定の中にSettings: Formatsがあるので、settings.jsonで編集を選択すると、プロジェクトのルートディレクトリに.vscode/settings.jsonが作られます。
（ユーザーを選択した場合はsettings.jsonは作られません）

出力されたsettings.jsonは下記のような設定項目になっているので、savePathをこのプロジェクトのcss出力先である /public/assets/cssに変更します。

{
    "liveSassCompile.settings.formats": [
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "/public/assets/css",
            "savePathSegmentKeys": null,
            "savePathReplaceSegmentsWith": null
        }
    ]
}

Dart Sassのコンパイル

コンパイルするにはVSCodeのステータスバー（最下部）にあるWatch Sassを選択します。

Watch Sassを選択すると表記が「Watting...」に変わり、コンパイルと監視が始まります。

下図のように/public/assets/cssに出力されていれば成功です。また、scssファイルの内容を変更して保存するとcssファイルが書き換わるか試してみてください。

初回にコンパイルしないようにする

初期設定ではWatch Sassを選択するとコンパイルと監視が始まりますが、コンパイルをしたくない場合があります。そんなときはsettings.jsonに"liveSassCompile.settings.compileOnWatch": trueを追加します。

{
    "liveSassCompile.settings.formats": [
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "/public/assets/css",
            "savePathSegmentKeys": null,
            "savePathReplaceSegmentsWith": null
        }
    ],
    "liveSassCompile.settings.compileOnWatch": false
}

mapファイルを出力しないようにする

mapファイルが不要な場合は、settings.jsonに"liveSassCompile.settings.generateMap": falseを追加します。

{
    "liveSassCompile.settings.formats": [
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "/public/assets/css",
            "savePathSegmentKeys": null,
            "savePathReplaceSegmentsWith": null
        }
    ],
    "liveSassCompile.settings.compileOnWatch": false,
    "liveSassCompile.settings.generateMap": false
}

まとめ

無事にLive Sass CompilerのForkでDart Sassがコンパイルできました！
ステータスバーの「Watch Sass」を押すだけでコンパイルと監視ができるシンプル設計なのでオススメです。

記事内では割愛していますが、監視対象の調整やAutoPrefixerの設定なども行えるので気になる方はこちらからドキュメントを参照してください。

今回作成したファイルは以下からダウンロードできます。