Because We Love Happy Coding

フリーライターからエンジニア × 講師。発信力だけあり余ってる感じ

PhpStormのSASSの設定に手こずった

今日もまたコーディング。だって僕らはHappy Codingが大好きだから。

目次

環境

  • 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 から、「Run」と「Event Log」の2つのウィンドウを開いておいた方がいいと思う。

コンパイルが走った時の挙動を確認できる。

環境設定>ツール>監視ファイル

環境設定>ツール>監視ファイル(Preferences > Tools > File Watchers) で下の方にある「+」ボタンを押して追加、設定画面を出すところまではわかった。

設定を間違えるとエラーで「SASSの監視設定を無効化しました」と言われる。エラーが出たら設定を見直して、一覧画面で「enabled」のチェックをつけ直すこと。

f:id:mogami74:20191023143415j:plain
環境設定>ツール>監視ファイル

環境設定>ツール>監視ファイル 各項目の設定値

f:id:mogami74:20191024064637p:plain
監視ファイル設定画面

この中身がなかなか手強い。

Track only root files

@importを使っている場合にどうなるのかちょっとよくわからんが、一応、外した状態で私は設定した。

引数 Arguments

デフォルトでは $FileName$:$FileNameWithoutExtension$.cssとなっている。

コロンの手前が変換前のSASSファイル名、コロンの後ろが変換後のcssファイル名。このままsassのプログラムに渡されるので、自分の設定に合わせて書き換える必要がある。

試行錯誤の結果、私は$FileDir$/$FileName$:css/$FileNameWithoutExtension$.cssで動いた。

Working Directory

$FileParentDir$にした。

Environment variables

COMPILE_PARTIAL=trueを設定した方がいいという説をStackOverflowで見た(URLを失念)。が、なくても私の場合は動いた。

結果

一度動いてしまえば、SCSSディレクトリ以下のどのファイルを変更しても、たちまちコンパイルが走り、css/app.cssに反映される。たいへん快適だ。

設定がうまく動かない間は「手動でコンパイルをさせるコマンドがあればいいのに」と思っていたが、一度動いてしまえばそんなものは不要だな、とわかる。