NetBeans8 のCSSプリプロセッサに node-sass を使ってみる

NetBeans では、これまで CSSプリプロセッサに Ruby Sass を使って scss ファイルをコンパイルしていました

NetBeans8にSASS/SCSSとcompassを導入
NetBeans8でSASS/SCSSとcompassの導入手順を紹介します。 SASSバージョンによってエラーとなる場合や、日本語を使用する場合の注意点についても紹介します (^^)…

先日は、Visual Studio Code に Node.js の node-sass を入れて Sass(scss) をコンパイルする方法を紹介しました

Visual Studio Code で Sass(scss)コンパイルを行うシンプルな方法
Visual Studio Code で node-sass を使い Sass(scss) コンパイルを簡単に行うことが出来るので設定方法と使い方を紹介いたします (^^)

どちらの開発環境からも Sass(scss)ファイルをコンパイルできるので、共通化しておいたほうが良いだろうということで NetBeans も node-sass を使うように変更してみました

node-sass の準備

下記記事を参考に node-sass が使えるようにインストールして下さい

Sass(sccs) のコンパイルは node-sass がRuby不要でシンプルかつ高速!
Node.js の node-sass モジュールを使って Sass(scss)スタイルシートをコンパイルして css に変換する方法を紹介します。Rubyも不要だし、とても高速なのでお勧めです (^^)…

NetBeans 共通設定

メニューの ツール→オプション を選択します

その他 の CSSプリプロセッサ を選択します

NetBeans-sass-setting

Sassパスに node-sass.cmd をフルパスで設定します

※Node.js のインストール方法によりパスは変わります。これは Nodist を使って Node.js をインストールした場合の例となっています

追加削除の生成

これは、chrome 等のブラウザの開発ツールで sass ファイルの該当位置が表示されるようにするためのデバッグ用情報の生成を行うかどうかの設定ですが、 Ruby Sass の使用時用のチェックボックスなので今回はチェックを外して下さい

デバッグ情報の生成はプロジェクトごとのオプション指定で行います

NetBeans プロジェクト毎の設定

メニューの ファイル→プロジェクトプロパティ から現在のプロジェクトに関する各種設定を行うことが出来ます

NetBeans-project-propaty

CSSプリプロセッサを選択して、scss ファイルフォルダーとCSSファイルの出力フォルダーをプロジェクトルートからの相対パスで設定します

また、scss ファイル保存時にコンパイルしたい場合は、保存時に Sass ファイルをコンパイル をチェックします

コンパイラオプション

node-sass は、コマンドラインから様々なオプションを指定して実行することが出来ます
オプションは node-sass ページ で紹介されています

※Ruby Sass のオプションと微妙に違っている場合があるので注意です

出力フォーマット –output-style

css ファイルのフォーマットは nested / expanded / compact / compressed から選択できます

nested インデントを使って階層化したネスト形式
expanded セレクタとプロパティを階層化せずに展開した形式
compact セレクタとプロパティを同一行にしたコンパクトな形式
compressed インデントや改行を取り除きサイズを圧縮した形式

ソースマップ –source-map

オプションで –source-map true と指定すれば、Chrome 等の source map に対応したブラウザで scss ファイルの対象行を表示するためのマップファイルを生成します

sass-source-map

マップファイルがあるとセレクタを定義している scss ファイルの対象行が確認出来ます

以上で node-sass を使った Sass(scss) コンパイルが出来るようになります

これで、NetBeans と VSCode のどちらからでも処理できるようになりました (^^)

 


まとめ記事紹介

search star user home refresh tag chevron-left chevron-right exclamation-triangle calendar comment folder thumb-tack navicon angle-double-up angle-double-down angle-up angle-down quote-left googleplus facebook instagram twitter rss