なんだか横文字だらけのタイトルですがその名の通り、VSCodeのDartJS Sass Compilerで、パーシャルファイル（アンダースコア／アンダーバーで始まるファイル）の保存時にも自動でCSSをコンパイルさせるための設定方法です。

DartJS Sass Compilerの唯一の不満点がこのパーシャル保存ではCSSをコンパイルしてくれないという点で、これが地味にストレス。ずっと見て見ぬ振りをしてきたんですが、ある日プツンときましてね。何とかしようとグーグル先生に相談したら、今回も素晴らしい先達をご紹介いただけました。でも意外とMacでの情報が見当たらなかったような？調べ方悪かった？と思ったので書き残しておきます。こういうのは後々自分の役にも立ちますしね。

手順

1. Homebrewをインストール
2. Nodebrewをインストール
3. Node.jsをインストール（↓ここら辺からコケた↓）
4. Node.jsを有効化＆パスを通す
5. Sassをインストール（↑ここまでコケた↑）
6. VSCodeで設定

手順はザックリこんな感じ。さぁみんな大好きターミナル、みんなのアイドルHomebrewの出番です。ターミナル怖い！GUIがいい！とか言ってたら楽できませんよ？私はもちろんその辺は無知なので小一時間ほどつまずいて叫んでましたが、無知でもできたのでカンタンカンタン。では1つずつ。

1. Homebrewをインストール

公式サイトに行き、インストールという所にあるコマンドをターミナルにコピペして実行しましょう。このコードは更新されるかもしれないので、必ず公式サイトからコピペ推奨。

最後に「Installation successful」と出たらOKです。ついでに以下のコマンドでバージョン確認も。ちゃんとインストールできたか確認の儀ですね。

brew -v

ちゃんとバージョンが表示されましたね？では次。

2. Nodebrewをインストール

そのHomebrewを使い、以下のコマンドでNodebrewをインストールします。NodebrewがあればNode.jsのバージョン管理が便利になるので、よく分からないならとりあえずやっておきましょう。

brew install nodebrew

インストールできましたか？ではバージョン確認の儀を。

nodebrew -v

バージョン表示されましたか？はい次。

3. Node.jsをインストール

とりあえず最新版をインストールしましょう。

nodebrew install-binary latest

私はここで「Failed to create the file」とエラー吐かれてコケました。グーグル先生にお尋ねしたら、Nodebrewのインストール直後だと起こるエラーだそうで。

mkdir -p ~/.nodebrew/src

これで解決しました。なお参考にしたのは以下のページ。Hiroooooさんありがとうございました。

• MacにNode.jsをインストールしてnpmを使えるようにする(Nodebrew利用) | Hirooooo’s Labo

4. Node.jsを有効化＆環境パスを通す

Node.jsの有効化

上記の確認の儀もかねますが、インストールしたNodeのバージョン確認を。

nodebrew ls

すると以下のように、current: noneと表示されるはずです。

v17.1.0

current: none

今はインストールされただけで有効化されていないので、これを以下のコマンドで有効化します。バージョンの数値はもちろん上記のバージョンと揃えましょうね。

nodebrew use v17.1.0

再度nodebrew lsで確認すると、今度はcurrent: v17.1.0のようになっているはずです。なってなければもう一度。

環境パスを通す

私はここでもコケました。というか実際は次の行程でコケたんですが、本来ここでやっとくと吉。MacはCatalinaからbashじゃなくてzshになっているそうで、しばらくもがいていましたよあぁ無知だよ畜生。そんな無知マンに教えてくださったのはこちらのサイト。

• 【node.js】macOSをアップグレード後にnpmコマンドがzsh:command not found npmのエラーを吐いて打てなくなった時の対処法 – 株式会社シーポイントラボ ｜ 浜松のシステム・RTK-GNSS開発

で、以下が実行するコードです。

zshの場合のコマンド

echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile

一応bashの場合のコマンド

echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile

変更を反映させる

source  ~/.zprofile

上記は .zprofile 向けなので、 .bash_profile の場合は変更しましょう。
これ見たMacユーザーは私の屍を越えてゆけ。はい最後にバージョン確認。

node -v

表示されましたね？では次。

5. Sassをインストール

ターミナルでこちらを実行。

npm install -g sass

上記のように-gオプションつけてグローバルインストールしときましょう。ローカルインストールすると作業ディレクトリにnode_modulesというフォルダが作られるし、設定も面倒になりそうなので。

一応バージョン確認しときますかね。

sass --version

6. VSCodeで設定

これが最後の行程。VSCodeのDartJS Sass Compilerで設定すれば完了です。

DartJS Sass Compilerの設定

DartJS Sass Compilerの設定画面を開き、Sass Bin Pathという項目にインストールしたsass.jsのパスを設定しましょう。nodebrewでインストールしたので.nodebrew（不可視フォルダ）の中にありました。バージョン表記の部分はエイリアスがあったのでそっちで設定。

/Users/yourname/.nodebrew/current/lib/node_modules/sass/sass.js

yourname部分は自分の名前に変えましょう。あと一応VSCodeを再起動しときましょうか。根拠はないけどこういう時はとりあえず再起動のおまじない。

Sass Watchを有効化

VSCodeのワークスペースのツリーでsassのフォルダを右クリックし、「DartSass: Sass Watch」をクリックしましょう。VSCodeのステータスバー右下に「Sass Watchers: 1」のように表示されていれば完了です！さぁパーシャルファイルを編集＆保存してみましょう！コンパイルされましたか？されましたね？やったー！快適ー！

…もしされなかった場合は、Node.jsを有効化＆パスを通すところか、上記のsass.jsのパスの設定あたりを疑ってみましょう。

参考

• 【VSCode】DartJS Sass Compilerで分割したパーシャルファイルの保存時に自動でコンパイルする方法 – tadabi
• MacにNode.jsをインストールしてnpmを使えるようにする(Nodebrew利用) | Hirooooo’s Labo
• 【node.js】macOSをアップグレード後にnpmコマンドがzsh:command not found npmのエラーを吐いて打てなくなった時の対処法 – 株式会社シーポイントラボ ｜ 浜松のシステム・RTK-GNSS開発

追記

• [2024/10/30] .zprofile の変更を反映させる手順を追記

おわりに

いや、デフォルトで実装してよ。

2021-11-28