Undefined mixinというerrorがmiddleman build実行時に発生した場合の対処法

middleman

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で動かしている時には発生しません。

参考

羊毛や小麦