Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away