带有 Bourbon 和 Neat gem 的未定义混合答案

【问题标题】：Undefined mixin with Bourbon and Neat gems带有 Bourbon 和 Neat gem 的未定义混合
【发布时间】：2012-12-02 14:42:34
【问题描述】：

我正在使用 bourbon 和 neat gem 来创建 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);
}
}

有人可以给我一些建议吗？

【问题讨论】：

标签： ruby-on-rails sass assets bourbon neat

【解决方案1】：

我遇到了同样的问题。我能够让它以两种不同的方式工作。

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

div.container {
  @include outer-container;
}

或者，您可以添加：

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

到 main.css.scss 文件的顶部。
这使您可以保持样式井井有条。

bourbon 网站链接到他们 wiki 中有关此问题的页面，但提到的解决方案对我不起作用：

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

【讨论】：

【解决方案2】：

我遇到了同样的问题。我的解决方案是将部分文件从layout.css.scss 重命名为_layout.css.scss。任何使用 SASS 混合的文件都需要在加载这些混合后包含在内。在这种情况下，它试图单独预编译 layout.css 文件，尽管它不需要它所引用的混合的源。添加下划线会使预编译器忽略该文件，直到另一个文件需要它。

【讨论】：

【解决方案3】：

根据Change Log，outer-container mixin 自 2.0.0 版起已被删除。 outer-container 可以使用的最高版本是 1.8.0。通过 Bundler 添加 Neat 时，您将获得 2.0 或更高版本，除非您在 Gemfile 中指定版本。

new way 这样做看起来要简单得多，但如果你有一堆不受支持的 scss，那就不太舒服了。

【讨论】：

【解决方案4】：

FWIW 这是https://github.com/thoughtbot/bourbon/issues/120 报告的问题，使用 jacklin 关于将导入语句直接添加到我的主 css 文件的评论解决了它。但是，我想解决这个问题，因为我真的不想继续将这些导入语句添加到我希望使用 mixins 的每个文件中

【讨论】：

【解决方案5】：

我也遇到了同样的问题。

我有一个使用 @include 外部容器的 div，还有一个包含 @include span-columns(8) 的 div。第二个 div 错误地坐在第一个之外，产生误导性错误“Undefined mixin 'outer-container'”。将第二个 div 移到第一个中（在外部容器中 - 在 CSS 和 HTML 中）更正了问题。

对于上述问题，您必须通过确保 p 标签是页脚的子标签来做同样的事情。

【讨论】：