PhpStormのファイルウォッチャーでsassを自動コンパイルするとき、scssファイルの階層を維持したまま別ディレクトリにcssファイルを出力したいと思ったことはありませんか？ とってもカンタンにできます。

ディレクトリ例

例えば、こんな感じにしたいとき。

• project/
  • scss/
    • style.scss
    • pages/
      • page.scss
  • css/
    • style.css
    • pages/
      • page.css

設定

上記ディレクトリ例の場合、ファイルウォッチャーの設定で、引数をこんなふうにすれば実現できます。

$FileName$:$ProjectFileDir$/css/$FileDirPathFromParent(scss)$$FileNameWithoutExtension$.css

ポイント

$FileDirPathFromParent(dir)$という変数を使うのがミソです。

この変数の1つ上の（上記だと「css」）ディレクトリを、この変数で指定した（上記だと「scss」）ディレクトリに置き換えたときの、そこを起点としたファイルまでのパスに置き換わるんです。

・・・ああ、ええ、とりあえず、この説明ではたいていの人が理解不能だと思います。私も自分で言ってて意味分かりません。でも、ほかにうまい説明が思いつきません。すいません。

https://pleiades.io/help/phpstorm/built-in-macros.html

この記事を書いたキッカケ

PhpStormでは、デフォルトでscssファイルと同階層にcssファイルが出力されます。sassが嫌いな私にはそれで十分ですが、案件によっては出力先が指定されてたりします。cssファイルを別ディレクトリに出力する方法を調べたところ、$FileParentDir$を使った方法くらいしかヒットしませんでした。単に親ディレクトリを差し替えるやり方は、中身の階層が深くなると使えません。中には、階層ごとにファイルウォッチャーを作るといったゴリ押し殺法も見かけました。いくら大半のコーダーがVSCodeを使っているからといって、世に出てる情報が少なすぎやしないかい。がんばって調べたら$FileDirPathFromParent(dir)$を使った方法が見つかりました。$FileDirPathFromParent(dir)$は非常に難解で、公式ドキュメントを見ても言ってる意味がちんぷんかんぷんです。1時間以上ああだこうだ試行錯誤を繰り返し、ようやく公式ドキュメントの言ってる意味がわかった次第です。そして、こう思いました。なんだ、これ、ふつうに便利なやつじゃん、と。