【PhpStorm+Node.js】でsass,scss環境を作る

この記事は最新更新日から、4年以上経過しています。

node.jsとyarnをインストールしてsassできるようにしようと思った。
ちなみにsass、scssについては記法が簡単でCSSに変換してくれること、便利なことぐらいしかわからない。
WebStormとかでも同じ方法で設定できます。

参考
環境
やったこと

参考

WindowsのPhpStormでSass自動ビルド (node-sass) - Qiita

前準備nodeインストールまで終わっていて、npmが使える前提です。　まだの場合先にこちら → Windowsでnodistを使ってNode環境構築npm -v> 4.0.5必要なものをイ…

環境

C:\>node -v
v12.18.3

C:\>ver
Microsoft Windows [Version 10.0.18363.1016]

C:\>yarn -v
1.22.4

やったこと

node.jsとyarnのインストール

node.jsとnpmかyarnがいるので、それぞれインストールする。
npmの改良版がyarnとのことなので、今回はyarnを使うことにした。

node.jsの推奨版をインストール

Node.js — どこでもJavaScriptを使おう

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

yarnのwindows版をインストール

404

Fast, reliable, and secure dependency management.

sassのインストール

yarn経由でsassをインストールする。
コマンドプロンプトでインストールしたいディレクトリまで移動して、下記コマンドをたたくとインストールされる。

C:\>yarn add node-sass

PhpStormでfile watchersを設定

PhpStormでfile watchersの設定すると書いた内容を自動でcssに書き出してくれる。

.sassファイルか.scssファイルを作ると、file watchersの設定をするかダイアログが出てくるのでYesをクリックすると設定画面に遷移できる。

もし設定画面が出てこなければ「file → setting → tools → file watchers」で、「+」ボタンを押下し、登録する方の拡張子を選択すると設定画面が表示されるので、下記のように設定した。

.sassも.scssで設定が違うようなので、使う方をfile watchersに登録する。（両方登録しても動く）

Program項目

「Program」にnode-sass.batファイルを指定する(windowsの場合)
node.js経由でインストールすると.binフォルダ下に「node-sass.bat」があるはず。

\node_modules\.bin\node-sass.bat

Arguments項目

「Arguments」にはコマンドに渡すオプションつけないといけないらしい。（このへんはよくわかってない）
oオプションがトランスパイル結果の出力先なので好みで下記のように設定した。

プロジェクトのどこかにある.sassファイルをコンパイルして同じ場所におきたい場合

--output-style expanded --source-map-contents --source-map-embed $ProjectFileDir$ -o $ProjectFileDir$

cssフォルダにある.sassファイルをコンパイルしてcssフォルダに入れる場合

（同じフォルダを出力先にしておくとUI上で子ファイルとしてまとめてくれるのでちょっと見やすい）

--output-style expanded --source-map-contents --source-map-embed $ProjectFileDir$\css -o $ProjectFileDir$\css

sassフォルダにある.sassファイルをコンパイルしてcssフォルダに入れる場合

(-o の前のディレクトリがかわる。ファイル数が多い場合に便利)

--output-style expanded --source-map-contents --source-map-embed $ProjectFileDir$\sass -o $ProjectFileDir$\css

エラーが出る場合

もし指定していなかったり指定先のフォルダがない場合は下記のようなエラーが出るのでArgumentsを見直すといいかも

【Argumentsを全く指定してない場合のエラー】
An output directory must be specified when compiling a directory

【Argumentsの指定先が間違っている場合のエラー】
--output-style expanded --source-map-contents --source-map-embed $ProjectFileDir$/hoge/sass -o $ProjectFileDir$/hoge/css/
No input file was found.