• カミナリツイッターカミナリtwitter
  • カミナリフェイスブックカミナリfacebook
  • カミナリインスタグラムカミナリinstagram

山陰の情報を発信するカミナリ

ナビ

24

OCTOBER

ウェブTUESDAY 2017 / 10 / 24

Bracketsの拡張機能 Brackets SASS が動作しない場合の対処法@Windows

Brackets で sass/scss ファイルを編集する際、保存時自動的に css に変換(コンパイル)する拡張機能に Brackets SASS があります。

以前に弊社ブログで紹介していた Koala を用いた方法でも可能ですが、こちらはエディタに統合されるので、Koala のようにプロジェクト毎に設定を追加する必要がありません。

Brackets SASS には sass/scss に変換するライブラリが同梱されていますので、プラグインのインストールだけで sass/scss の環境構築が可能です。

 

・・・が、私が使用している Windows10 (64bit版) では動作しませんでした。
※ なお brackets-sass は 2.0.3

調べてみるとひどく長いエラーメッセージが出ております。

 

Error: libsass bindings not found in C:\Users\username\Dropbox\.bin\.Develop\BracketsPortable\Data\home\AppData\Roaming\Brackets\extensions\user\jasonsanjose.brackets-sass\node\2.0.3\node_modules\node-sass\vendor\win32-ia32-48\binding.node. Try reinstalling node-sass? at Object.sass.getBinaryPath (C:\Users\username\Dropbox\.bin\.Develop\BracketsPortable\Data\home\AppData\Roaming\Brackets\extensions\user\jasonsanjose.brackets-sass\node\2.0.3\node_modules\node-sass\lib\extensions.js:148:11) at Object. (C:\Users\username\Dropbox\.bin\.Develop\BracketsPortable\Data\home\AppData\Roaming\Brackets\extensions\user\jasonsanjose.brackets-sass\node\2.0.3\node_modules\node-sass\lib\index.js:16:36) at Module._compile (module.js:570:32) at Object.Module._extensions..js (module.js:579:10) at Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12) at Function.Module._load (module.js:438:3) at Module.require (module.js:497:17) at require (internal/module.js:20:19) at Object. (C:\Users\username\Dropbox\.bin\.Develop\BracketsPortable\Data\home\AppData\Roaming\Brackets\extensions\user\jasonsanjose.brackets-sass\node\2.0.3\render.js:39:12)

Brackets Portable を使用していますので、通常のパスとは若干異なっています

 

で、エラーメッセージを元にファイル関係を見てみると、存在しないファイルを参照していることが判明しました。
簡単な操作で正常に動作させることができたので下記に手順を掲載しておきます。

 

1.Brackets の 【ヘルプ】メニュー → 【拡張機能のフォルダーを開く】の順にクリック。

2.エクスプローラが起動するので、下記の順にフォルダを開いていく。
【user】→ 【jasonsanjose.brackets-sass】 → 【node】 → 【2.0.3】 → 【node_modules】 → 【node-sass】 →  【vendor】

3.2の vendor フォルダ内に 【win32-ia32-48】というフォルダを作成する。

4.下記からファイルをダウンロードする。 ※ 画面を開いて Download ボタン
https://github.com/sass/node-sass-binaries/blob/master/win32-ia32-48_binding.node

5.ダウンロードしたファイルを 【binding.node】 にリネームする。

6.5のファイルを3で作ったフォルダ内に配置する。

7.Bracketsを再起動する。

 

手順は以上です。
あとは .scss などのファイルを作成して上書き保存するだけで自動的に css にコンパイルされます。

 

手順の概要を説明しますと、拡張機能の中に SASSファイルを css に変換するライブラリがOS毎に用意されているのですが、OSによっては必要なファイルがなかったようで手動で追加したという流れです。

なお この拡張機能をアップデートすると上記ファイルも無くなってしまう可能性がありますので、アップデート後に正常動作しなくなったらまたこの手順を行なってください。

 

参考URL: “cleanup” error appears after having updated Brackets · Issue #180 · jasonsanjose/brackets-sass · GitHub

 

2017/10/24現在最新版の brackets-sass 2.0.3 では win32-ia32-48 でしか動作しないようです。

今後バージョンアップがされた場合は、別途新しいバージョンのものを入手する必要があるかもしれません。https://github.com/sass/node-sass/releases に一覧がありましたので、最新版を取得したいならこちらから取得してください。

現在の最新版は win32-ia32-57 のようです。

松本博之隠しプロフィール画像

TEXT by

松本 博之まつもとひろゆき)

1978年、鳥取県米子市生まれ。
株式会社マジックワード WEBシステムの開発・運用を担当。

WordPressの実績多数。表面的な使用方法を把握するだけでなく、WordPressのソースコードを読み解いて対応できます。
国家資格の応用情報処理技術者をなんとなくとりました。

この人が書いた他の記事を読む