IntelliJ IDEA で Sass を使うときの設定と注意点

Sass を使うときは nodeと npm をあらかじめインストールする。これは

node のインストール

brew install node

これで npm もインストールされる。

sass のインストール

npm install -g sass

IntelliJ

上のインストールが終わったら IntelliJ を起動する。Preference から Tools を選び、File Watcher のダイアログを表示する。

次のように設定する。

重要なのはこの 3 つ。

• Program
• Arguments
• Output paths to refresh

Program

Program は

/usr/local/lib/node_modules/sass/sass.js

とする。つまり

Arguments

Arguments は

$FileName$:$ProjectFileDir$/css/$FileNameWithoutExtension$.css

などとする。ProjectFileDir はプロジェクトのルートパス。プロジェクトの直下に css ディレクトリがあって、その中に css ファイルがあるときは上のように設定する。

Output paths to refresh

Output paths to refresh は

$ProjectFileDir$/css/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileNameWithoutExtension$.css.map

とする。