phpstormとscssについて

お世話になります。
表題についてで、もし同じ環境の方が居ればですが、
phpstormの設定(file watchers)でコンパイル後にcssファイルごと出力されるファルダを振り分けたいのですが、色々と試行錯誤をしてみましたがうまくいきません。
具体的には、例えばwordpressではindex.phpと同フォルダにstyle.cssがなければいけませんが、それ以外のcssファイルをcssフォルダに入れてしまいたいと思っています。

index.php
style.css
cssフォルダ-base.css
scssフォルダ -style.css, base.scss

上記のようにscssファイルはscssフォルダ内で管理をし、コンパイル後は各々のcssの場所に出力されるようにといった具合です。
(すみません、ターミナルのtreeコマンドの様に記述できませんでした)

phpstormの設定を見てみると、プロジェクト単位では出力場所を調整できるが、cssファイル単位の設定ができないように見受けられます。

どなたかわかる方がいらっしゃいましたらご教授のほどお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

Scope指定はあまり使い込んでないので見落としがあるかもしれませんが、File WatcherごとにScopeを指定できますので、それを利用すれば可能かと思います。

例えばこんなディレクトリ構成で、

D:\repo\PhpstormProjects\tt43980FileWatcherSample
├─.idea
├─css
└─scss
   ├─abc.scss
   └─base.scss

追加押して css ディレクトリに置くものを選択する。

Scopeの参照ボタンを押す。

＋ボタン押して、Localを選び、All-Other-Scssという名前に
scssディレクトリを選ぶ
Include Recursivelyを選ぶ
まだ閉じない

5. そのままbase.scssを選ぶ
6. Excludeを選ぶ（ && 条件になっている事も確認する。or だと効かなくなっちゃうので）
7. OK押す

ポイントは先にExcludeして後からそこを含むディレクトリのInclude RecursiveやるとOr条件になるので注意です。

Watcherの画面では、ArgumentsとOutput paths to refresh: を変更して出力先を指定します。
Arguments:
--no-cache --update $FileName$:$ProjectFileDir$/css/$FileNameWithoutExtension$.css
Output paths to refresh:
$ProjectFileDir$/css/$FileNameWithoutExtension$.css

で、OKで閉じます。

再びWatcherを追加し、今度はScopeを開き、＋ボタンを押し、Localで名前付けて、base.cssを指定してIncludeを押します。

こちらは、プロジェクト直下に出すなら、ArgumentやOutput paths to refresh は以下のようにすればいいでしょう。
$ProjectFileDir$/$FileNameWithoutExtension$.css

ただ、これだとscssにサブディレクトリ作ってもすべてcssの直下に出力されます。
ディレクトリ構成も引き継ぎたいなら、
scssディレクトリを右クリックしてMark Directory As でSource Rootにしてやり、
Argument や Output ～で
$ProjectFileDir$/css/$FileNameWithoutExtension$.css
ではなく、
$ProjectFileDir$/css/$/FileDirRelativeToSourcepath$/$FileNameWithoutExtension$.css
を指定すればいいでしょう。
（ただし、プロジェクト構成にもよりますのでご参考まで。）

あとはプロジェクトの内容に応じて修正すればよいかと思います。
Watcherを増やしすぎると重くなるかもしれないのでそこも注意してください。

投稿2016/08/11 04:54