0
1

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-10-19

TIPS

:point_up: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タブ

と選択する。

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

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

da72ed7afcce0c0a0d641a4332c9f34e.png

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

全部入力が終わった画面
d28a8a2a900b49e144237be69761eb27.png

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

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

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1