sass/middleman: undefined mixin during export or how to fix a 25000 line css export

In short: You get the sass error "undefined mixin" and you're sure that that mixin is in scope? Check all your sass partial files for a leading underscore. If not sass will try to compile this partial with it`s own scope which probably lacks all of the global mixins & other data. Pretty obvious but easy to miss in a bigger folder structure.

--

Using the middleman gem, I ran into a problem during the build process. I got an error "undefined mixin" even though the development server was running without any problem.

My main styles.css.scss file has an @import "base/base" which imports itself a couple of settings, global mixins and more.

So these settings and mixins should be in scope for every following import in styles.css.scss. I really wondered when I hit this problem. My first solution was really dirty, impulsive and so WRONG. I located the scss files which caused the problem, I tossed in a quick @import "base/some/mixin". Now the mixin was found. I did this for a dozen files. And guess what? I wondered why my exported css files was so mind-boggling bloated. I got around 25000 lines of css. Well a lot of them was sass debug output. But even without counting them my css fiel was pretty big.

The second anbormality I spotted was this in my compiled styles.css:

@import url(http://fonts.googleapis.com/css?family=Merriweather:300);
@import url(http://fonts.googleapis.com/css?family=Merriweather:300);
@import url(http://fonts.googleapis.com/css?family=Merriweather:300);
@import url(http://fonts.googleapis.com/css?family=Merriweather:300);
@import url(http://fonts.googleapis.com/css?family=Merriweather:300);
@import url(http://fonts.googleapis.com/css?family=Merriweather:300);
@import url(http://fonts.googleapis.com/css?family=Merriweather:300);
@import url(http://fonts.googleapis.com/css?family=Merriweather:300);
@import url(http://fonts.googleapis.com/css?family=Merriweather:300);
@import url(http://fonts.googleapis.com/css?family=Merriweather:300);
@import url(http://fonts.googleapis.com/css?family=Merriweather:300);
@import url(http://fonts.googleapis.com/css?family=Merriweather:300);

/* normalize.css v2.0.1 | MIT License | git.io/normalize */

So something was really wrong. This import is located in "base/fonts" and shut be imported only once during my initial @import "base/base"

Solution???
I found out that I had some scss files without a leading underscore. Of course! That's the problem. During build sass tried to compile those files as a separate stylesheet with a separate scope- missing all the global import of my main styles.css.scss file.

I added the missing underscore to those scss partials, cleaned all my mistakenly placed imports and voilá less than 2500 lines including the compact sass debug output. Phew..