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


TIPS

node-sassの実行ファイルの指定は、NetBeansの設定(全プロジェクト共通)になってしまうので、プロジェクト外にインストールした方がよさそうです

前準備

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

npm -v
> 4.0.5

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

## node-sassをインストールするディレクトリに移動 
cd C:\node-sassインストール先パス

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

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

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

NetBeansの設定

  • NetBeansを起動
  • ファイル(F) > プロジェクトプロパティ
    • CSSプリプロセッサ
      • Sassタブ

と選択する。

今こんな画面(デフォルト設定)

  • 右上の「実行可能ファイルを構成」ボタンを押すと「オプションダイアログ」が開くので
    • "Sassパス"に、さっきのnode-sass.cmdファイルを指定
    • ...node-sassインストール先...\node_modules\.bin\node-sass.cmd
    • 「OK」で確定

  • 元のダイアログ(プロジェクト・プロパティ)に戻って
    • 保存時にSassファイルをコンパイル にチェックを入れる
    • 入力・出力に、プロジェクトルートからのパスを入力
    • コンパイラオプションを入力 --output-style expanded --source-map-contents --source-map-embed

全部入力が終わった画面

「OK」ボタン押してダイアログ閉じると、自動にコンパイラが動いてcssが出力される!ハズ!

node-sassのコンパイラオプションは公式(GitHub)に乗ってます!
node-sass