预编译时的 Sass 未定义变量

Posted 2023-03-06

【中文标题】预编译时的 Sass 未定义变量

【英文标题】：Sass undefined variable on precompilation

【发布时间】：2014-04-20 04:06:21

【问题描述】：

我正在将我们的 Rails (3.2.17) 应用程序升级到 sass，并且在资产预编译期间遇到“未定义变量”错误。我使用 @import 将我的 sn-ps 包含在 master.scss 文件中。此设置在本地运行良好，但在预编译时出错。解决错误的唯一方法是将 @import sn-ps 导入到 sn-ps 中，它引用第一个 sn-p 中定义的 mixins 和变量。

例如：我 @import 'fonts' 和 'buttons' 到 master.scss 中，然后我必须再次 @import 'fonts' 到 'buttons' 因为它使用了在 'fonts' 中定义的变量。这解决了预编译错误，但这并不理想，因为现在不是只有一个“字体”实例被加载到应用程序中，而是现在有两个。

@importing all the sn-ps only one time into master.scss 当我不预编译时，它可以在本地工作。必须有一个解决方案。有什么想法吗？

【问题讨论】：

False positive "undefined variable" error when compiling SCSS 的可能重复项

也许吧。我的 sn-ps 有前导下划线，我没有使用指南针 gem。

【参考方案1】：

您看到此错误是因为您将 application.css 与 require 指令一起使用。

来自 SASS rails 文档。

Sprockets 提供了一些放置在 cmets 内部的指令，称为 require、require_tree 和 require_self。不要在你的 SASS/SCSS 文件中使用它们。它们非常原始，不能很好地处理 Sass 文件。相反，请使用 Sass 的原生 @import 指令，该指令 sass-rails 已自定义以与 Rails 项目的约定集成。

只需将您的application.css 重命名为application.css.scss（使用.sass 对我不起作用）。删除除require self 之外的所有内容。在此处包含您的全局 @import 语句。

另外需要注意的是，您需要手动将所有 css 文件作为 @import 添加到您的 application.css.scss。我通常会创建一个文件夹app/assets/stylesheets/app 并将@import app/**/* 添加为application.css.scss 的最终条目

我希望这会有所帮助。

【讨论】：

我看到了，但这不是问题所在。我用不同的方式修复了它。

@anbiniyar，删除除“require_self”之外的所有内容对我有用。谢谢

【参考方案2】：

我使用以下帮助解决了这个问题：SASS - use variables across multiple files。

基本上，您创建一个主文件来保存所有变量等，然后将主文件导入到引用您的变量的每个 sn-p 中。我遇到的一个障碍是使用 mixins。我必须将 mixin 文件导入 master 以便这些变量在其他 sn-ps 中工作。