PhpStormで階層を維持したまま別ディレクトリにsassを出力する
前田 大地
PhpStormのファイルウォッチャーでsassを自動コンパイルするとき、scssファイルの階層を維持したまま別ディレクトリにcssファイルを出力したいと思ったことはありませんか? とってもカンタンにできます。
ディレクトリ例
例えば、こんな感じにしたいとき。
- project/
- scss/
- style.scss
- pages/
- page.scss
- css/
- style.css
- pages/
- page.css
- scss/
設定
上記ディレクトリ例の場合、ファイルウォッチャーの設定で、引数をこんなふうにすれば実現できます。
$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時間以上ああだこうだ試行錯誤を繰り返し、ようやく公式ドキュメントの言ってる意味がわかった次第です。そして、こう思いました。なんだ、これ、ふつうに便利なやつじゃん、と。