WebStorm + nvm + File Watcher で node-sass を実行する
ちょっとしたHTMLコーディングするときに、WebStormのFile Watcherでsass(SCSS)をcssに変換できると便利です。
私の開発環境のUbuntuでは、nodeのバージョン管理にnvmを使っています。
私の環境では、File watcher実行時にnode の実行ファイルが見つからないとエラーが出てしまって、File Watcherが使えませんでした。
WebStorm の File Watcherで nvmでインストールしたnodeを実行する方法についてまとめます。
- File -> Settings -> Tools -> File Watchersを選択
- +ボタンを押してSCSSを選択する
- Tool to Run on Changes -> Environment variablesのフォルダーボタンをクリック
- NameにPATH、Valueに$PATH:/{{ユーザー名}}/.nvm/versions/node/v10.15.0/binを入力してOKを押す
他に、WebStormでsassコンパイルする方法として、 package.jsonのscriptsに
"css:watch": "node-sass ./*.scss -o css -w "
を追加して、Run / Debug Configurationから実行させる方法もあります。
以前はターミナルでnvmのnodeが使えなかったのですが、最近のバージョンでは解決されたようです。 WebStormに限らず、JetBrainsのIDEは頻繁にアップデートしているので、 File Watcherでnvmのnodeがデフォルトで使えないことも解決するかもしれません。
