Sassコンパイル環境をつくる(PHPStorm + node-sass)

  • 1
    いいね
  • 0
    コメント

Sassのコンパイル環境を作ろうとすると、今まではRubyの実行環境を構築して、Sass+Compassが使えるようにしていたと思います。
しかし、デザイナーさんがちょっとcssを編集したいというときに、Rubyの実行環境を構築をお願いすることは、手順書ありきでもなかなか手間がかかるものでした。

compass-logo.png

それに、Ruby製のSass+Compassはコンパイル時間が長いことや、Compassが既に開発停止していることを考えると、それらを使い続けることにこだわる必要はないでしょう。

node-sass.png nodejs-logo.png

今回はそのための対策として、Node.js の node-sass パッケージをインストールして、WebStorm / PHPStormから使えるようにするところまで紹介します。

ただ結局は、黒い画面を触ることにはなるのでデザイナーさんには敷居が高いかもしれませんが、Sass+Compass環境を作るよりも簡単で、しかもコンパイルの実行速度が速いので、今から環境を作るならnode-sassが良いと思います。

実施環境

下の環境で、PHPStorm+node-sassの環境構築を実施しました。

  • Macbook Pro (Retina, 15-inch, Mid 2014)
  • Mac OS X 10.11.6 El Capitan
  • PHPStorm 2017.1.4
  • Node.js v6.8.1

macOSにnpmをインストールする

% brew update
% brew install -g node
% node -v
v8.4.0

~/.bashrc ファイルに以下追記する

export PATH="/usr/local/bin:$PATH"

node-sassをインストールする

% npm install --global --save-dev node-sass

動作を確認する

動作確認をするには、ターミナル上で実際にnode-sassコマンドを実行します。
node-sassの第一パラメータにはscssファイルパス、第二パラメータにはcssファイルパスを指定します。

% node-sass /path/to/theme/scss/style.scss /path/to/theme/css/style.css --source-map true --output-style expanded 

実行すると、scssファイルがコンパイルされてcssファイルが生成されます。

node-sassコマンドを実行するとき付けるオプションですが、コーディング効率化をする上でソースマップが欠かせないので有効化しておきます。

あと、出力形式はexpandedを指定しておけばGitマージしたときにコンフリクトが発生しづらいです。出力形式を compressed にすれば圧縮率が上がりますが、Gitコンフリクトが頻発するので個人的にはほとんど使いません。

--source-map true --output-style expanded 

--output-styleに指定可能な出力形式は以下4つです。

  • nested ・・・ Scssでのネストがインデントされた形式で出力。デフォルト形式。
  • expanded ・・・ ネストのインデントがない状態での出力。よくある見やすい形式。
  • compact ・・・ セレクタごとに1行ずつに出力。ネスト構造は反映されない。
  • compressed ・・・ 全てを一行で出力してコメントが消える。最も軽量。

PHPStorm上でnode-sassの実行環境を設定する

Sassファイルを保存すると同時にコンパイルが実行されるように、File Watchersの設定を行います。

環境設定 > Tools > File Watchers を開きます。

Screen Shot 2017-09-13 at 16.12.28.png

そして、[+] アイコンをクリックして、SCSSを選択します。

Screen Shot 2017-09-13 at 16.10.32.png

Edit Watcher画面は以下のように設定してください。

項目 設定値
File type SCSS
Scope Project Files
Program /usr/local/bin/node-sass
Arguments --source-map true --output-style expanded \$FilePathRelativeToProjectRoot\$ \$FileParentDir$/css/$FileNameWithoutExtension\$.css
Working directory \$ProjectFileDir\$
Output paths to refresh (なし)

Sassファイルの編集中はコンパイルせずに、保存したときだけコンパイルを実行したいときは、同画面上にある以下のチェックを外します。

[x] immediate file synchronization

これらの設定を行ったら、PHPStormを再起動します。
再起動は忘れがちですが、再起動するまで設定が反映されないことがありますのでご注意ください。

以上により、cssディレクトリにコンパイルされたファイルが出力されるかと思います。