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について）
