middleman build実行時にエラーが発生
以下のようなエラーが発生しました。
1 2 |
/Users/hoge/blog/webfood/source/stylesheets/layout/main.scss:7:in `outer-container': Undefined mixin 'outer-container'. (Sass::SyntaxError) (in /Users/hoge/blog/webfood/source/stylesheets/layout/main.scss:7) |
エラーの全量ログはこちら。
原因はscssのパーシャルにアンダーバーがなかったこと
当サイトのメインのscssはall.scss
で以下のように多くのパーシャルをimportしています。
1 2 3 4 5 6 7 8 9 10 |
@charset "utf-8"; @import "normalize"; @import "font-awesome"; @import "bourbon"; @import "base/base"; @import "neat"; @import "layout/*"; @import "modules/*"; @import "utility/*"; @import "code_style"; |
sassやscssのパーシャルはファイル名の頭にアンダーバーがないと、パーシャルだと認識されず、メインのファイルと認識されてしまいます。そこで、all.scss
とは違う独自のスコープを持ってしまい、Undefined mixin
と言われてしまうということです。
私が独自に作ったscssは全てファイル名の頭にアンダースコアをつけていませんでしたので、つけました。例えば、laoyout/main.scss
というファイルはlayout/_main.scss
というように変えたところ正常にmiddleman build
を実行できました。
スポンサーリンク
middleman serverで動かしている時はエラーは発生しない
今回はmiddleman build
時に初めて気づきました。でも、理由はわかりませんが、ローカルの環境でmiddleman server
で動かしている時には発生しません。
参考
- sass/middleman: undefined mixin during export or how to fix a 25000 line css export
- 【Sassを覚えよう!Vol.7】ファイルを分割して管理を楽に(partialについて)