WebStorm / PhpStorm から Sass をコンパイルする

Category : Software

WebStorm / PhpStorm という IDE があるのですが、この IDE は Sass(SCSS) をサポートしていて、ハイライトなんかもしてくれます。
ただ .scss ファイルをコンパイルするのにコマンドプロンプト立ち上げるのめんどくさいなーと思ってなんとかできないか調べてみました。

以前リンク集でも紹介したのですが、参考にしたのはこの記事です。

ただ、これの通りにやっても上手くいかなくて、前回は諦めましたが、今回は上手くいったのでやり方をメモしておきます。

まずは 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 です。

これで少しは楽できるかなーと思います。

Leave a Reply