PhpStormでSASS使ってみた
面倒なコンパイルはPhpStormにやってもらおうってお話。
Rubyやらsassやらのインストールとかそんなんは割愛☆（ゝω・）vｷｬﾋﾟ
前提条件
PhpStormでプロジェクト作成
空のプロジェクト作ってscssディレクトリ、その中にstyle.scssを作成。
今回はscss_demoって名前のプロジェクトで。
File Watcherの追加と設定
Preference > File Watcherを選択。
下の＋からSCSSを選択。
デフォルトのままでもちゃんとコンパイルされるけど、scssファイルと同じ階層にcssファイルがコンパイルされちゃうのでいろいろ変更。
せっかくなのでSource Mapも出力するよーに設定。
| 変更箇所 | デフォルト | 変更後 |
|---|---|---|
| Argument | --no-cache --update $FileName$:$FileNameWithoutExtension$.css | --no-cache --update –-sourcemap $FileName$:$FileParentDir$/css/$FileNameWithoutExtension$.css |
| Output paths to refresh | $FileNameWithoutExtension$.css | $FileParentDir$css/$FileNameWithoutExtension$.css |
確認とか
File Watcherの設定に問題が無ければ、scssファイルを更新していけば勝手にcssとcss.mapが生成される。
ついでにSource Map。
黒い画面なんて要らんかったんや！
黒い画面が面倒臭くてCodeKitも買ったけど、PhpStormならこれだけで完結するので便利！
