IntelliJ IDEAで特定のscssだけcssにコンパイルする #CSS

みんな大好きIntelliJ IDEAは大変素晴らしいIDEで、
プロジェクト内のscssファイルを監視して変更を感知したら即座にcssにコンパイルしてくれる機能(プラグイン)があります。

ただし初期状態だとプロジェクト内のすべての.scssファイルを監視してcssにコンパイルしてしまいます。
おそらく普通は複数の.scssファイルを@importなどで1つにまとめてコンパイルすることが多いかと思うので、これは困ります。

というわけで複数の.scssから1つだけ.cssにコンパイルする方法をメモしておきます。

前提

IDEAで.scssを自動コンパイルするには公式の File Watchers というプラグインが必要になります。
Preference -> Pluginsからインストールしておきます。

おそらくは普通にインストールするだけでプロジェクト内に.scssファイルを作るたびにFile Watchersで監視するかどうか聞かれるようになるはずです。

最終的に

ProjectDir
    |
    -- css
    |    |
    |    -- style.css
    |
    -- scss
         |
         -- style.scss
         |
         -- test.scss

という構成で、test.scssはstyle.scssからインポートされるのみで、
style.scssだけがcssにコンパイルされたら成功です。

というわけで早速設定していきます。
Preference -> Tools -> File Watchersと進んで設定画面を開きます。
ここには現在のプロジェクトで監視しているルールの一覧が表示されます。

新しくscss用のルールを追加するので、下のAddボタンを押して、表示されたTempletesの中からSCSSを選択します。

設定画面が開くので、

Watcher Settingsから

を変更します。Scopeで監視対象のファイルを指定し、Argumentsでコンパイルされたcssの出力先を指定しています。

Scope右の…からscope追加ダイアログを開きます。
左上の+ボタンを押し、Localを選択します。scope名を聞かれるので適当に入力します。

上記の画面真ん中あたりのセレクトボックスからProjetを選択すると現在のプロジェクトディレクトリが開くので、
scss/style.scssを選択し、includeを押します。

上の方のPattern: のところに
file:scss/style.scss
が表示されれば大丈夫なので、OKを押します。

ちなみに、今回は特定のファイルだけを対象にしていますが、
このPatternは文字通りパターンで色々と複雑な条件を指定できるようなので、時間がある時に色々と試してみようと思います。
参考:https://www.jetbrains.com/idea/help/scopes.html

Argumentsはデフォルトを以下のように変更します

--no-cache --update $FileName$:$FileNameWithoutExtension$.css
        ↓↓
--no-cache --update $FileName$:../css/$FileNameWithoutExtension$.css

以上で設定は終わりです。
OKを押してエディタに戻り、style.scssを編集したらstyle.scssだけが自動的にcssにコンパイルされるはずです。

stylle.scss

@import "test.scss";
div{
  color: #501812;
  border-right: 10px;
}

test.scss

p{
  margin-bottom:10px;
}

以下のように、ちゃんとtest.scssがインポートされてstyle.scssだけがコンパイルされています

style.css

p {
  margin-bottom: 10px; }

div {
  color: #501812;
  border-right: 10px; }

/*# sourceMappingURL=style.css.map */

以上です。大したことはないんですが、たまにやると忘れてしまいそうなのでメモとして。