NetBeans IDE 11.0でDart Sassを使う方法
![Computer troubleshooting concept vector illustration.](http://www.teradas.jp/wp-content/uploads/2019/10/computer-troubleshooting-concept-vector-illustration_sizeXS.jpg)
Windows 10 上の NetBeans IDE 11.0 で Dart Sass を使えるようにする手順を紹介します。
具体的には、次のエラーが出る場合の対処方法になります。
Could not find an option named "cache-location".
Dart Sassのインストール
今回は Windows 向けのパッケージマネージャ ”Chocolatey” を使って Dart Sass をインストールします。
Chocolatey のインストール手順の正確な情報は、次のリンク先で確認してください。
手順としては、管理者権限の PowerShell から以下の操作をするだけ。
- Get-ExecutionPolicy して、”Restricted” なら先のリンク先で指定されたコマンドを実行
- 先のページに書かれている1行コマンドを実行して Chocolatey をインストール
非常に簡単。
Chocolatey のインストールが完了したら、次のコマンドで Sass もついでにインストールしておきます。
$ choco install sass
Code language: DOS .bat (dos)
こちらも簡単ですね。
インストールが完了したら、念のため Windows を再起動しておくといいと思います。
NetBeansでのSassの設定とバッチファイル
この状態でコマンドプロンプトから “where sass” と入力すると、
C:\ProgramData\chocolatey\bin\sass.exe
Code language: CSS (css)
あたりに Dart Sass がインストールされている事が確認できます。
NetBeans IDE 11.0 の「Tools」→「Options」→「CSS Preprocessors」→「Sass Path」で直接このパスを指定すると、現状では、冒頭のエラーが出てしまう状態です。
その場合は、まず、以下の内容で Windows のバッチファイルを作成します。
set arguments=%*
set arguments=%arguments:--cache-location =%
set arguments=%arguments:C:\Users\USERNAME\AppData\Local\NetBeans\Cache\11.0\sass-compiler =%
set arguments=%arguments:--debug-info =%
set arguments=%arguments:--compass =%
set arguments=%arguments:-E =%
set arguments=%arguments:utf-8 =%
"C:\ProgramData\chocolatey\bin\sass.exe" %arguments%
Code language: DOS .bat (dos)
※パスについては NetBeans IDE に出力された Sass のエラーを参考に、各自の環境に合わせて書き換える必要があります。(USERNAME部分やバージョンなど)
※このバッチファイルでは、NetBeans IDE 側にハードコードされている各種引数を削除しています。
その後、NetBeans IDE 11.0 の「Tools」→「Options」→「CSS Preprocessors」→「Sass Path」に、作成したバッチファイルのパスを指定してやります。
![how_to_use_dart_sass_on_netbeans_11_sh](http://www.teradas.jp/wp-content/uploads/2019/10/how_to_use_dart_sass_on_netbeans_11_sh.png)
以上で、Windows 上の NetBeans IDE 11.0 でも Dart Sass が動作するようになるはずです。
なお、これでも動作しない場合は、NetBeans 側に表示されるエラーログを確認して、エラーの原因となっている引数をバッチファイル側で削除・書き換えてやればOKと思います。
NetBeans IDE 11.0 の Sass 連携は、確か Ruby ベースの “Compass” を前提とした設計になっているようですが、2019年10月現在、CSS コンパイラの「Sass」では Ruby 版が非推奨となっています。
将来的には NetBeans IDE 側が Dart Sass に対応してくれるんじゃ?という期待もありますが、とりあえず現状はこういうトリッキーな方法で乗り切っている感じです。
参考情報:
こんな記事も読んでみませんか?
- Windows上のSASS(SCSS)でUTF-8を使う方法(Invalid Windows-31J characterエラーが出る場合の対処)
- Safariだけに効くCSSハック【Safariハック・Scss記法も】
- SassがBOM付きCSSを吐いて先頭のCSS定義が効かなかった件(BOM付きPHPをincludeしつつBOMを削除する方法)
- SCSSでCompressedモードでもコメントを出力する方法
- 【Windows】インストールされているフォントのフォントファミリー名を調べる方法
- 【CSS】日本語を文節区切りで折返し・改行表示できる「word-break: auto-phrase」【BudouX】