主に技術的なことを書くブログ

浅めにマークアップ&フロントエンドの技術的なことをメモしていましたが、ざっくばらんに書いています。

GruntでCompassが動かないときにやってみること

GruntでCompassを使おうとしたら、下記のようなエラーが出てコンパイルが上手くいかない、ということをチラホラ聞きます。

Running “compass:dist” (compass) task
    error htdocs/_dev/assets/_scss/main.scss (Line 6 of htdocs/_dev/assets/_scss/_layout.scss: Undefined mixin ‘border-radius’.)
Compilation failed in 1 files.
Warning: ↑ Use —force to continue.

的な感じとか。

正月前に躓いていていろいろやりすぎて、結局何で解決できたのかわからなくなったのですが、おそらくここらへんをやっていけば動くだろう、というメモです。お試しください。

Rubyのバージョンアップ

MacOSYosemiteにアップデートしたらGruntでエラーが出た、といった事例もあるようで、RubyCompassのバージョンの相性(Sass自体がRubyで書かれているので)もあるようです。

参考:gruntjs - What causes this error in grunt-contrib-compass after update to Yosemite? - Stack Overflow

ruby -v

でバージョンを確認。

バージョンのアップの方法は、rbenvでバージョンアップするのが流行りのようです。

Gruntfile.jsファイルでのミス

Gruntでの書き方でミスってるとか、そもそもタスクがないとか。

ツールなしで、Compassプロジェクトが作れるかどうかやってみてできたらやっぱりGrunt側がおかしいはず。

参考:Ruby - Compassを使ってみる - Qiita

grunt-contrib-compassでやってるなら、grunt-compass-multipleとか別のプラグインで試してみる。

参考:grunt-compass-multiple

SCSSファイルでのミス

そもそも、インポートの指定がない、とか、SCSSファイル側の単純な記述ミスとか。

@import 'compass';

僕は恥ずかしながらこれだったのですが、「import」の綴りが「inport」になってました(爆)