New Maichiro Maichiro

PhpStormやPyCharm(IntelliJ IDEA)でSassを使う設定:最近はnode-sassでなくsass(dart-sass)を使う

Sassを使うときはnvm、Node.js、npmをあらかじめインストールする。そして

npm install -g sass

でSassのパッケージをインストールする。パッケージは例えば

/Users/tesla/.nvm/versions/node/v16.9.1/lib/node_modules/

に入る。node(Node.jsのこと)をnvmでインストールした場合、ユーザーディレクトリの下に「.nvm」という隠しディレクトリができる。その中にNode.jsの各バージョンがインストールされ(例えばv16.9.1)、そのlibのnode_modulesにnpmでインストールしたパッケージが入る。Sassのインストールが成功していれば

/Users/tesla/.nvm/versions/node/v16.9.1/lib/node_modules/sass/

というディレクトリができている。sassにたくさんのプログラムファイルがあり、その中にsass.jsがある。今回はこのファイルを使う。

PhpStorm(PyCharm)を起動してFile Watcherを設定する

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

次のように設定する。

重要なのはこの3つ。

Program

Program は

/Users/tesla/.nvm/versions/node/v16.9.1/lib/node_modules/sass/sass.js

などとする。

Arguments

Arguments は

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

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

Output paths to refresh

Argumentsを上のように設定した場合、Output paths to refresh は

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

などとする。

最近はnode-sassでなくsass(dart-sass)を使う

Sassの開発者がnode-sassでなくDart Sassを使うように2020年10月に投稿した。Dart Sassのnpmにおけるパッケージ名はsassであり

npm install -g sass

でインストールする。

LibSass is Deprecated