Unformed Building

WindowsでWebStorm-PhpStormからSassをディレクトリ単位でwatchする

公開：

パーマリンク

単にSassファイルをwatchするだけなら、以前書いた記事とはてなダイアリーで書いたもので大丈夫なんですが、分割されたSCSSファイルごとにやるのもあれだし、partialなんかはどうするのってなるので、ディレクトリ単位でwatchしておきたいわけです。

まあ前のと同じようにディレクトリを指定すればいいんだろうと思ったらエラー。
で、調べてみたら、--watchコマンドのディレクトリ指定時のパスの書き方が問題のようです。

SASS -watch path:path broken on Windows - Sass | Google グループ

つまり、パスを指定するときはバックスラッシュじゃなくてフォワードスラッシュ（普通のやつ）で書いてね、ってことみたいです。

次の問題はPhpStormのExternal Toolsの設定なんですが、Parametersのマクロにはフォワードスラッシュの絶対パスがないんですよね。
External Toolsに登録したものは使いまわしたいのでマクロを上手く使ってパラメーターに指定したい。けど$FileDir$なんかのフォワードスラッシュ版がない。
ただし、プロジェクトルートから現在のファイルへの相対パスに限ればフォワードスラッシュのものはあるので、プロジェクトルートまでのパスさえ取れればいいわけです。

とりあえずマクロをプレビューしながら見ていたら、プロジェクトの設定なんかが入ってる.ideaディレクトリ内の.iml。
これを使ってプロジェクトルートへの絶対パスを取ります。

ちなみに、最近は大体こんな構造にしています。

ProjectRoot/
  ├ .idea/
  │ └ ProjectName.iml
  │
  ├ inc/
  │ ├ scss/
  │ │ ├ style.scss
  │ │ └ partial/
  │ │    ├ _reset.scss
  │ │    ├ _layout.scss
  │ │    ├ _more.scss
  │ │
  │ ├ css/
  │ │ └ style.css
  │ │
  │ └ js/
  │
  ├ content1/
  └ content2/

この構造でプロジェクトルートまで行くには次のようにします。

$ModuleFilePath$/../../

モジュールファイルはプロジェクトルート直下のディレクトリ内にあるので、2回戻ってプロジェクトルートまで行きます。
ここまでくればあとは単体のSCSSファイルのときと同じです。
External Toolsに渡すパラメーターは次のようになります。

--watch --load-path "$FileDir$" "$ModuleFilePath$/../../$/FileRelativeDir$":"$ModuleFilePath$/../../$/FileRelativeDir$/../css"

$/FileRelativeDir$はプロジェクトルートから対象ファイルのあるディレクトリまでのフォワードスラッシュ相対パスです。
--load-path以外のオプションはお好みで。

コンパイルするファイルのあるディレクトリを$/FileRelativeDir$で指定して、コンパイル後のCSSのあるディレクトリは同じ階層なので、また1回戻ってcssディレクトリを指定します。

以上で終わりですが、これはWindowsの場合のみに起きるっぽいので、Macの人とかは普通に$FileDir$とかを使うといいんじゃないかと思います。