在预编译中使用未定义的变量

Question

我正在将我们的Rails(3.2.17)应用程序升级到sass,并且在资产预编译期间遇到"未定义变量"错误.我使用@import将我的代码片段包含在master.scss文件中.此设置在本地运行良好,但在预补偿时出错.解决错误的唯一方法是将@import片段分成片段,这些片段引用第一个片段中定义的mixins和变量.

例如:我@import'fonts'和'buttons'进入master.scss然后我必须@import'fonts'第二次进入'buttons',因为它使用'fonts'中定义的变量.这避免了预补偿错误,但它并不理想,因为现在有两个"字体"加载到应用程序中,而不是只有一个"字体"实例.

@importing所有的片段只有一次进入master.scss在我不预编译时在本地工作.必须有一个解决方案.有什么想法吗？

Answer 1

您看到此错误,因为您正在使用application.csswith require指令.

从SASS rails文档.

Sprockets提供了一些放在注释中的指令,名为require,require_tree和require_self.请勿在您的SASS/SCSS文件中使用它们.它们非常原始,与Sass文件不兼容.相反,使用Sass的本机@import指令,sass-rails已经定制以与Rails项目的约定集成.

简单地说,重命名application.css为application.css.scss(使用.sass对我不起作用).除去以外的所有内容require self.在@import那里包括你的全球声明.

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

我希望这有帮助.

Answer 2

我使用以下帮助修复了问题:SASS - 在多个文件中使用变量.

基本上,您创建一个主文件来保存所有变量等,然后将主文件导入到引用变量的每个片段中.我遇到的一个障碍是使用mixins.我不得不将mixin文件导入master,这些变量可以在其他代码片段中使用.