【 更新 】おすすめ記事はこちら

Sass

パーシャルファイルを自動コンパイル｜DartJS Sass Compiler

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 sassBinPath plugin configuration property ( See above ).

DartJS Sass Compiler and Sass Watcher – FAQ

加えて、拡張機能の設定Dartsass:Sass Bin Pathに以下を入力したところ解決しました。

node_modules\sass\sass.js

はじめに

DartJS Sass Compiler and Sass Watcherをインストールしておいてください。

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.jsダウンロードページ

画面に沿ってインストールを終えたら、以下コマンドで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項目を探します。

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を選択。

DartSass: Sass Watch

画面右下にSass Watchers: 1と出ればOK。フォルダが1件監視状態になっています。

Sass Unwatchで監視解除

監視はSass Unwatchで個別に解除できますが、一括で解除するならこちらが便利。

F1でコマンドパレットを開き、DartSass: Clear All Sass Watchersと入力します。

DartSass: Clear All Sass Watchers

画面右下からSass Watchersが消えれば、解除完了です。これで変更は検知されません。

おわりに

ファイルの分割を進めていて、CSSが一部適用されないなあと思って見つけた設定でした。

パーシャルファイルのコンパイルがうまくいかないときは、以下3つを見直してくださいね！

  • Node.jsのインストール
  • Sassパッケージのインストール
  • Dartsass:Sass Bin Pathの設定

Dart Sassの@use、@forwardの使い方、使い分けのコツは以下記事でも解説しています。

関連記事VSCodeではじめるDart Sass実務入門