VSCodeの「DartJS Sass Compiler and Sass Watcher」でコンパイルしたときのこと。
「パーシャルファイル」の内容だけ出力されず、スタイル反映されないことがありました。
拡張機能の説明を読むと、npm
でsass
パッケージを入れて、監視する必要があると判明!
The directory watch functionality depends on the sass command line binary (platform-specific). So you need to install sass binary separately and then specify the binary using
DartJS Sass Compiler and Sass Watcher – FAQsassBinPath
plugin configuration property ( See above ).
加えて、拡張機能の設定Dartsass:Sass Bin Path
に以下を入力したところ解決しました。
node_modules\sass\sass.js
目次
はじめに
DartJS Sass Compiler and Sass Watcher
をインストールしておいてください。

こちらは参考までになりますが、今回使うサンプルデータの構成は以下の通りです。
├─css
├─node_modules
├─scss
│ ├─style.scss
│ └─_base.scss
└─index.html
style.scss
は、_base.scss
を読み込むだけでいいので@use "ファイル名";
に。
@use "base";
_base.scss
には変化が分かるものを入れてください。今回は文字サイズにします。
h1 {
font-size: 48px;
}
CSSフォルダに書き出すときは、Dartsass: Target Directory
にCSS
と入力。
Node.jsをインストール
このあと入れるSassパッケージを動かすにあたり、Node.jsが必要になります。
公式のダウンロードページからOSに合ったインストーラをダウンロードしてください。

画面に沿ってインストールを終えたら、以下コマンドでNode
のバージョンを確認。
node -v
同様に、同梱npm
のバージョンが以下で表示されれば、インストール作業完了です。
npm -v
Sassパッケージをインストール
npm
(パッケージ管理システム)で、Dart Sassパッケージをインストールします。
まずは、ターミナルを使って作業フォルダまで移動。パスは自分のものに変更のこと。
cd C:\Users\Name\Documents\Directory\sample
以下コマンドで、パッケージ管理用のファイル、package.json
を用意してください。
npm init -y
ここでsass
をインストール。node_modules
とpackage-lock.json
が生成されます。
npm i -D sass
Sass Bin Pathを設定
拡張機能のタブを開き、DartJS Sass Compiler and Sass Watcher
を右クリック。
メニューから「拡張機能の設定」を選び、Dartsass:Sass Bin Path
項目を探します。

OSがWindowsの場合は、以下のパスを入力欄に貼り付けてください。
node_modules\sass\sass.js
Linuxの場合はこちら。グローバルインストールするときは/usr/local/bin/sass
で。
node_modules/.bin/sass
Error: ProjectRoot: . Sass Binary Path ... does not exist
と出ても無視でOK。
設定を変えたので、念のためVSCodeを再起動します。
Sass Watchで監視
ワークスペースにフォルダを入れて右クリックし、DartSass: Sass Watch
を選択。

画面右下にSass Watchers: 1
と出ればOK。フォルダが1件監視状態になっています。
Sass Unwatchで監視解除
監視はSass Unwatch
で個別に解除できますが、一括で解除するならこちらが便利。
F1
でコマンドパレットを開き、DartSass: Clear All Sass Watchers
と入力します。

画面右下からSass Watchers
が消えれば、解除完了です。これで変更は検知されません。
おわりに
ファイルの分割を進めていて、CSSが一部適用されないなあと思って見つけた設定でした。
パーシャルファイルのコンパイルがうまくいかないときは、以下3つを見直してくださいね!
- Node.jsのインストール
- Sassパッケージのインストール
- Dartsass:Sass Bin Pathの設定
Dart Sassの@use
、@forward
の使い方、使い分けのコツは以下記事でも解説しています。