WebStorm/PhpStorm メモ - Sass コンパイル時の出力先

External Tool の設定方法はメインのブログで書いた WebStorm / PhpStorm から Sass をコンパイルする を見てもらうとして、今回はその出力先を設定する方法。

上記リンク先のように

"$FilePath$":"$FileDir$\$FileNameWithoutExtension$.css"

でやると、SCSS ファイルが置いてあるのと同じディレクトリに CSS ファイルが出力される。 ただ、これだとファイルの管理がめんどくさいので、ディレクトリ構造を以下のようにしたい。

css/
├ scss/
│ └ style.scss
└ style.css

css/scss/style.scss をコンパイルしたら css/style.css に出力してほしいわけです。 その設定ですが、External Tools の設定でパスの指定を次のようにします。

"$FilePath$":"$FileDir$\..\$FileNameWithoutExtension$.css"

同様に、

include/
├ scss/
│ └ style.scss
└ css/
   └ style.css

みたいな場合は

"$FilePath$":"$FileDir$\..\css\$FileNameWithoutExtension$.css"

で大丈夫です。

@azu_reさんありがとうございました。