WebStorm/PhpStormからSassをコンパイルする
公開：
更新：
WebStormとPhpStormというIDEがあるのですが、この IDEはSassをサポートしていて、ハイライトなんかもしてくれます。
ただSCSSファイルをコンパイルするのにコマンドプロンプト立ち上げるのめんどくさいなーと思ってなんとかできないか調べてみました。
参考にしたのはこの記事です。
Easy SASS compilation in WebStorm / PhpStorm | Richard Tuin’s mindspins
ただ、これの通りにやっても上手くいかなくて、前回は諦めましたが、今回は上手くいったのでやり方をメモしておきます。
まずはRubyとSassをインストールして、Sassが使える状態にします。インストール方法なんかは検索すればいっぱいでてきます。
準備ができたらWebStorm（PhpStorm）の設定をします。
SettingsからExternal Toolsと進んで、［Add］ボタンをクリック。
ダイアログが出てくるので、そこに入力していきます。
［Name］はツールの名前。適当に「Sass Compile」とか付けとけばいいんじゃないでしょうか。
［Group］はツールのグループ。カテゴリーみたいなものなので適当でいいと思います。
［Description］は説明文。
［Menu］は、このツールをどこに表示するかというもの。とりあえず全部チェックしといて後で外せばいいです。
［Open Console］はツール実行時にIDEのコンソールを表示するかどうか。
［Synchronize ～～］はよく分からないですが。とりあえずチェックしときます。
そして［Program］の欄には、Sassへのパスを入力します。
C:\Ruby\bin\sass.bat
Cドライブ直下にRuby入れてたらこんな感じになります。
フォルダツリーで探せるのでそっちでも見たほうが分かりやすいかもしれません。
次はParametersですが、ここに変換するファイルやオプションを指定します。
単純にツールの実行時にコンパイルしたいだけなら次のような感じです。
"$FilePath$":"$FileDir$\$FileNameWithoutExtension$.css"
コマンドプロンプトでやるときとほとんど一緒です。$FilePath$とかそういうのが気になったら入力欄の右にあるものから意味を調べてください。
compressedオプションを渡したい場合はこんな感じ。
--style compressed "$FilePath$":"$FileDir$\$FileNameWithoutExtension$.css"
ちなみに、--watchですが、指定しててもツールの終了時にしかコンパイルされないのであんまり意味がない気がします。適当なタイミングで自分でツールを実行したほうがいいかもしれません。
でも何かやり方はありそうなんですけどね……。
すいません、--watchですが、ちゃんとできてました。IDE上で反映されるタイミングがちょっと違うだけみたいです。
@importを使ったときにエラーが出たりする場合には--load-path "$FileDir$"を追加してみるといいでしょう。
で、最後、Working Directoryの欄。
最初にあげた参考サイトでは$ProjectFileDir$となっていましたが、そうではなくて、Rubyの場所を入力します。
C:\Ruby\bin
同じプロジェクト内にRubyとSassがあったら$ProjectFileDir$でもいいのかもしれません。試してないですけど。
サイドバーのファイルを右クリックとか、タブ上で右クリックしてツールを選択すれば実行され、その状態はコンソールで確認できます。
同じツールをもう一度繰り返す場合には、コンソールの［Run］を押せばOKです。
これで少しは楽できるかなーと思います。