[web]cssのsassをコンパイルしようとしてエラーが出てハマった話
今回は久しぶりに技術的な話を。
アウトプットを増やす目的と、
自分の備忘録的な形で残しておくことにしようと感じました。
少しずつでも記事にして書けたらな〜と思います。
この業界に入り、
もう一年ちょっとが経過しているので
自身の成長も含めて。
Sassについて凄くざっくり触れておこう
一応Webデザイナー(もはやUI/UXデザイナー的なポジション)になっているので
cssを編集する機会が多いです。
特に私の勤めている会社では、私がほとんどcssを管理しています。(仕組みは作れませんがw)
私の会社では、cssはsassを使って生成してます。
例えば、自分で一つずつ
h1.hoge { color: #000; font-size: 24px; }
とかって書いていって永遠とこれを続けるのって結構苦痛ですよね。笑
sassっていうのはそれを簡単にしてくれるものです。(凄くざっくりw)
例えばですが、こんな感じで装飾したいとします。
<h1 class="hoge">見出しだよ <span>ここは水色にしたいよ</span></h1>
この場合、普通のcssで書くと、
h1.hoge { 省略 } h1.hoge span { color: #00FFFF; }
えーかなり安直ですが、まあこんな感じになると思います。
これが何個も何個もあると、書いていて発狂しそうになると思います。
それを便利にしてくれるのがsass。
公式サイトはこちらからご覧下さい。
sass 使い方
とかで調べたらたくさん出てくるので、気になる人は調べてみてください。
ビルドした際にエラー
それで本題ですが、こっちはかなりサクッと説明で終わりそうです。
最近そこまで頻繁に会社のcssを変更、修正等を加えていなくて、
久しぶりに変更しようと思って、コンパイルを実行しようとしたところ、
Loading "sass.js" tasks...ERROR >> Error: `libsass` bindings not found. Try reinstalling `node-sass`? Warning: Task "sass" not found. Use --force to continue. Aborted due to warnings.
こんなエラーが。
なんだなんだと思っていろいろ調べていたら
どうやらnode-sassのバージョンが古いのかな?と思い入れ直していたのですが、
ここでハマりました。
どうやら、node-sassではなく、grunt-sassが古い模様。
一度npmからgrunt-sassをuninstallして、入れ直したら復活してくれました。
$ npm uninstall --save-dev grunt-sass $ npm install --save-dev grunt-sass
困った時は、おそらく一度node-sassとgrunt-sassをuninstallして
installし直すっていうのが一番手っ取り早いかもしれないですね。