Blog

ブログ

PhpStormで階層を維持したまま別ディレクトリにsassを出力する

前田 大地

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時間以上ああだこうだ試行錯誤を繰り返し、ようやく公式ドキュメントの言ってる意味がわかった次第です。そして、こう思いました。なんだ、これ、ふつうに便利なやつじゃん、と。

Web Designer / Developer

前田 大地

沼津高専中退。デザイン会社、システム開発会社を経てセブンシックスを設立。マーケティング、デザイン、テクノロジーに精通するオールラウンダーとして、県内の中小企業に向けた戦略型ホームページ制作を開始。一方で、都内の広告代理店からの要請で大企業案件にも多数参加。企業が本当に必要とするホームページ制作とは何か、を日々探求している。

Blog top