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

Category : Software

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

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

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

次の問題は PhpStorm の External Tools の設定なんですが、Parameters のマクロにはフォワードスラッシュの絶対パスがないんですよね。
External Tools に登録したものは使いまわしたいので Macro を上手く使ってパラメーターに指定したい。けど $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$ とかを使うといいんじゃないかと思います。

Leave a Reply