目次
環境
- PhpStorm 2019.1.3 Build #PS-191.7479.51
- macOS 10.14.6
ファイル構成
WordPressのテーマファイル。以前DreamweaverでSASSのコンパイルをしていた。
ファイル構成としては以下のような感じ。
/themes/some-theme-dir/css/app.css /themes/some-theme-dir/SCSS/app.scss /themes/some-theme-dir/SCSS/founation/_reset.scss /themes/some-theme-dir/SCSS/founation/_base.scss (以下略)
app.scssが/SCSS/以下のscssファイルを全部@importで読み込んでいる。
// ========================================= // Foundation // ========================================= @import "foundation/_reset"; @import "foundation/_base"; // 以下略
手順
node install
こちらのサイトを参考に。
PhpStormでsassを設定してブラウザのオートリロードを実装する | 経験知
$ brew update $ brew install -g node
「/.bashrc」に追加。なければ作成する。
ファイルの作成場所（homeディレクトリ）がどこだかよくはわからなかったが構うこたぁねえ、touchしちまえばいいってんで。
touch ~/.bashrc
不可視ファイルだが、こちとらファイラーはPath Finderだから関係ねぇ。エディタ（CotEditor）で開いて書き込む。
export PATH="/usr/local/bin:$PATH"
sassインストール
こちらのサイトではnode-sassをインストールしているが、JetBrains公式（Sass, Less, and SCSS - Help | PhpStorm ）ではsassをインストールしているようなので、そのままsass。
npm -g install sass
View > Tool Windows
先へ進む前に、メニューの View > Tool Windows から、「Event Log」ウィンドウを開いておいた方がいいと思う。
コンパイルが走った時の挙動を確認できる。
環境設定＞ツール＞監視ファイル
環境設定＞ツール＞監視ファイル（Preferences > Tools > File Watchers） で下の方にある「＋」ボタンを押して追加、設定画面を出すところまではわかった。
設定を間違えるとエラーで「SASSの監視設定を無効化しました」と言われる。エラーが出たら設定を見直して、一覧画面で「enabled」のチェックをつけ直すこと。
環境設定＞ツール＞監視ファイル 各項目の設定値
この中身がなかなか手強い。
Track only root files
@importを使っている場合にどうなるのかちょっとよくわからんが、一応、外した状態で私は設定した。
引数 Arguments
デフォルトでは $FileName$:$FileNameWithoutExtension$.cssとなっている。
コロンの手前が変換前のSASSファイル名、コロンの後ろが変換後のcssファイル名。このままsassのプログラムに渡されるので、自分の設定に合わせて書き換える必要がある。
試行錯誤の結果、私は$FileDir$/$FileName$:css/$FileNameWithoutExtension$.cssで動いた。
追記: ちゃんと検証できていないのだが、node-sassの時にはコロンを半角スペースに変えて$FileDir$/$FileName$ css/$FileNameWithoutExtension$.cssで動いた。node-sassとsassで引数のフォーマットが違うことに注意。
Working Directory
$FileParentDir$にした。
Environment variables
COMPILE_PARTIAL=trueを設定した方がいいという説をStackOverflowで見た（URLを失念）。が、なくても私の場合は動いた。
結果
一度動いてしまえば、SCSSディレクトリ以下のどのファイルを変更しても、たちまちコンパイルが走り、css/app.cssに反映される。たいへん快適だ。
設定がうまく動かない間は「手動でコンパイルをさせるコマンドがあればいいのに」と思っていたが、一度動いてしまえばそんなものは不要だな、とわかる。
