WindowsのPhpStormでSass自動ビルド (node-sass)

2341 ワード
node-sass PhpStorm PhpStorm テキストリンク

前準備

nodeインストールまで終わっていて、npmが使える前提です。
　まだの場合先にこちら → Windowsでnodistを使ってNode環境構築

npm -v
> 4.0.5

必要なものをインストール

## プロジェクトのディレクトリに移動 
cd C:\プロジェクトパス

## npmの初期化(すでに終わっているなら必要ないです)
npm init -y

## node-sassをインストール
npm install --save-dev node-sass

カレントディレクトリのnode_modules以下にファイルが出来ているのを確認する
node_modules.bin\node-sass.cmd

PhpStormの設定

設定を開くために、どちらかを実行します

  • キーボードショートカットCtrl + Alt + S
  • メニュー File > Settings を選択

ダイアログが開いたらFile Watchersの項目を開きます
Tools > File Watchers

  • 右上の「＋」ボタンを押し、<custom>を選択

    • Nameを適当に付けます。
      • サンプルはnode-sassにしました。
    • Filetypes:
      • SCSS
    • Scope:
      • Project Files
    • Program:
      • C:\～～node-sassインストールしたパス～～\node_modules\.bin\node-sass.cmd
    • Arguments:
      • --output-style expanded --source-map-contents --source-map-embed $ProjectFileDir$/src/sass -o $ProjectFileDir$/docs/css/
    • □Immediate file synchronization
      • チェックを外します

下記構成の時のサンプルです。パスは環境に応じて変更してください。
sassファイルの置き場所： /src/sass
cssファイルの出力場所： /docs/css/

「OK」を押して確定します。

.scssファイルを更新すると、node-sassが動いてcssファイルが作成されます

問題点

  • Sassファイル１つ編集しただけで、全ファイルがビルド対象になってしまう