Sass::SyntaxError: 未定义的 mixin 'mixin_name'

Question

我正在开发一个 Rails 4 项目，我正在使用 Sass 和 Sass 的 @import 将多个 css 合并为一个。它工作正常，但如果我为 mixins (_mixins.css.scss) 使用新的部分并仅在 main.css.scss 中 @import 这个并使用 mixins 之后添加的任何其他文件 _webapp.css.scss

    @import "bootstrap/bootstrap";
    @import "responsive/mega_menu";
    @import "responsive/mixins";
    @import "responsive/webapp";

Rails 预编译过程无法找到“responsive/mixins”并在_webapp.css.scss 中给出错误

Sass::SyntaxError: Undefined mixin 'mixin_name'.

这里mixin_name定义在responsive/mixins中

Answer 1

对我来说，这听起来像是一个资产管道问题。来自the Rails docs：

如果要使用多个 Sass 文件，一般应该使用 Sass @import 规则 而不是这些 Sprockets 指令。使用 Sprockets 指令，所有 Sass 文件都存在于其中 它们自己的作用域，使变量或 mixin 仅在定义它们的文档中可用。

您确定在某处没有 sprocket 指令，需要 responsive/webapp（甚至隐含在 require_tree 中）？

想到的另一种可能性是，这个未定义的混合错误实际上可能在被导入之前被调用。你确定你没有在mega_menu 的某个地方使用那个mixin吗？

Answer 2

如果你的文件名为mixins.css.scss，那么你只能在它被称为mixins.css 时导入它，因为SASS 试图解释@import 语句。如果没有扩展，SASS 期望它是[filename].scss。您正在尝试导入 [filename].scss，而您的名字是 [filename].css.scss。所以试试：

@import "responsive/mixins.css";

Answer 3

如果除 main.css.scss 之外的样式表使用来自 mixin 部分的 mixin，那么您也必须在其中导入它。所以看起来你需要在你的 webapp 部分中导入 mixins。