Rails sass 编译中的“错误：未定义变量”答案

【问题标题】："Error: Undefined variable" in Rails sass compilationRails sass 编译中的“错误：未定义变量”
【发布时间】：2021-03-16 03:09:02
【问题描述】：

我正在构建一个 Rails 应用程序，但遇到了一些奇怪的 sass 编译问题。

我的设置：

Rails 6.1.3
Ruby 3.0.0
sass-rails 6.0.0
sassc-rails 2.1.2

我的application.scss 基本上会加载一些设置一些变量的sass 文件，最后导入layout.scss，它有效地使用了导入的变量。

// application.scss
@import "normalize";
@import "variables/colors";
@import "variables/typography";
@import "variables/sizes";
@import "layout";

// variables/_typography.scss
$ui-font-family: "Poppins", sans-serif;
$ui-font-family-title: "Lato", sans-serif;

// layout.scss
h1, h2, h3, h4, h5, h6 {
  font-family: $ui-font-family-title;
}

// views/layouts/application.html.erb
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

一开始它有效，但后来我注意到有时我收到一个错误提示

Error: Undefined variable: "$ui-font-family-title".
        on line 3:16 of app/assets/stylesheets/layout.scss
>>   font-family: $ui-font-family-title;

但是，有时在重新编译资产后（由于任何 scss 文件中的更改）我注意到它可能工作或失败（出现该错误）。

我在每个 sass 文件中添加了一个@debug "Compiling filename" 以了解编译顺序，并发现一些对我来说很奇怪的东西。

它总是对每个sass文件编译两次，问题是有时它编译一次变量，因此在第二次编译layout.scss时会失败。

这是它工作时的样子：

这是失败时的样子：

如您所见，当它失败时，它会连续两次编译layout.scss 文件，我的猜测是，由于在第二次迭代中它不会导入其他文件，所以它找不到变量为预计。

您知道这里可能出了什么问题吗？

【问题讨论】：

标签： ruby-on-rails sass sprockets

【解决方案1】：

我确实发现了问题。

似乎在 Sprockets 4.0 上，它编译 scss 文件的方式在这里定义：

# app/assets/config/manifest.js
//= link_tree ../images
//= link_directory ../stylesheets .css

这基本上会选择stylesheets 文件夹中的任何 css/scss 文件进行编译。

因此，此问题的解决方案是更新清单以仅使用 link 到您想要作为入口点的唯一文件，还是仅将 application.scss 文件保留在文件夹的第一级并将所有其他人移至子文件夹，以免它们成为清单的目标。

我现在完成了这个，它有效：

// application.scss
@import "utils/normalize";
@import "variables/colors";
@import "variables/typography";
@import "variables/sizes";
@import "pages/layout";

所以stylesheets/（至少在第一级深）中唯一的 scss 文件是application.scss。

您可以在sprockets upgrading docs 上找到更多信息：

您可能还会发现以前未编译为顶级目标的一些文件现在已编译为顶级目标。例如，如果您现有的应用程序在 ./app/assets/javascripts 或 css/scss 文件 ./app/assets/stylesheets 中有任何 js 文件，那么带有 Sprockets 4 的 Rails 现在会将它们编译为顶级目标。由于他们以前没有被这样对待，你可能不是故意的；如果它们是 .scss 部分引用要在其他文件中定义的变量，它甚至可能导致错误消息看起来像 Undefined variable: $some_variable。

【讨论】：