使用Bourbon和Neat宝石的未定义混合问题

Question

我正在使用 bourbon 和 neat 宝石来创建 Rails 应用程序的设计。我的 application.css.scss 包含以下内容：

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

但是，如果我运行“rake assets:precompile”命令，则会出现以下错误：

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

文件main.css.scss包含以下内容：

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);
}
}

有人能给我一些建议吗？

- Jesus

Answer 1

我遇到了同样的问题。我有两种不同的方法解决了这个问题。

第一种方法可能不太理想，但你可以直接在application.css.scss文件中添加你的代码：

div.container {
  @include outer-container;
}

或者，您可以添加：

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

将以下内容添加到您的 main.css.scss 文件的顶部。这样可以使您的样式更加有序。

虽然 Bourbon 站点链接到他们的 wiki 上的页面，但所提到的解决方案对我没有起作用。请参考下面链接的 Github 页面：https://github.com/thoughtbot/bourbon/wiki/Rails-Help-%5C-Undefined-mixin。

- jacklin

Answer 2

我曾经遇到过同样的问题。我的解决方案是将一个偏文件从layout.css.scss重命名为_layout.css.scss。任何使用SASS mixins的文件都需要在这些mixins被加载后包含。在这种情况下，它试图独立预编译layout.css文件，尽管它不需要它引用的mixins的源代码。添加下划线使预编译器忽略该文件，直到另一个文件需要它。

- lobati

Answer 3

根据变更日志，自2.0.0版本起已删除outer-container mixin。您可以使用的最高版本是1.8.0，如果通过Bundler添加Neat，则会获得2.0或更高版本，除非在Gemfile中指定版本。 新方法看起来简单得多，但如果有大量不受支持的scss，则可能无济于事。

- Rob Allen

Answer 4

就此问题报告而言，https://github.com/thoughtbot/bourbon/issues/120。使用Jacklin的意见，将导入语句直接添加到我的主CSS文件中解决了这个问题。然而，我希望解决这个问题，因为我不想在每个要使用mixin的文件中都添加这些导入语句。

- battlemidget

Answer 5

我曾经遇到过同样的问题。

我有一个使用@include outer-container的div，和一个包含@include span-columns(8)的第二个div。第二个div错误地位于第一个div之外，导致出现误导性错误“未定义mixin 'outer-container'”。将第二个div移动到第一个div内部（在CSS和HTML中的outer-container内）可以解决问题。

对于上述问题，您必须通过确保p标签是footer的子元素来执行相同的操作。

- Rob Tyler