Undefined mixin with bourbon and neat gems

Question

I use bourbon and neat stones to create a rails application design. My application.css.scss contains the following:

@import "bourbon"; @import "neat"; @import "main"; 

But if I run "rake assets: precompile", then this error will occur:

 rake aborted! Undefined mixin 'outer-container'. (in /Users/anonymous/example/app/assets/stylesheets/admin/main.css.scss) /Users/anonymous/example/app/assets/stylesheets/admin/main.css.scss:5:in `outer-container' /Users/anonymous/example/app/assets/stylesheets/admin/main.css.scss:5 

The main.css.scss file contains the following:

 footer#page_footer { @include outer-container; nav{ @include span-columns(6); @include shift(3); section#about_me_footer, section#contact_footer, section#miscellaneous_footer { @include span-columns(2 of 6); } } p { @include span-columns(6); @include shift(3); } } 

Can anyone give me some suggestions?

Answer 1

I had the same problem. I was able to make it work in different ways.

The first way is probably less desirable, but you can add your code directly to the application.css.scss file:

 div.container { @include outer-container; } 

Alternatively, you can add:

 @import "bourbon"; @import "neat"; 

At the beginning of the main.css.scss file.
This allows you to save your styles.

The bourbon site links to a page on its wiki, citing this problem, but the solution mentioned does not work for me:

https://github.com/thoughtbot/bourbon/wiki/Rails-Help-%5C-Undefined-mixin

Answer 2

I had the same problem. The solution for me was to rename the partial file from layout.css.scss to _layout.css.scss . Any files using SASS blends should be included after loading these mixes. In this case, he tried to precompile the layout.css file, although he did not require the source of the links to which he referred. Adding underscores causes the precompiler to ignore this file until another file requires it.

Answer 3

FWIW is the issue reported by https://github.com/thoughtbot/bourbon/issues/120 using jacklin's comment about adding import statements directly to my main css file. However, I would like this problem to be fixed, since I really do not want to add these import statements to each file, I want to use mixins for

Answer 4

I had the same problem.

I had a div using an external @include container, and a second div containing @include span-columns (8). The second div didn’t sit correctly outside the first, creating the error “Undefined mixin“ external container. ”Moving the second div inside the first (inside the external container — in CSS and HTML) fixed the problem.

For the above problem, you should do the same, making sure that the p tag is a child of the footer.

Answer 5

According to the Change Log, the outer-container mix has been removed from version 2.0.0. The highest version you can use with outer-container is 1.8. When you add Neat through the Bundler, you will get 2.0 or higher, unless you specify a version in your Gemfile.

The new way to do this looks a lot simpler, but it is of little consolation if you have a bunch of unsupported scss.