ruby-on-rails - Rails sass 编译中的 "Error: Undefined variable"

Question

我正在构建一个 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;

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

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

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

这是它工作时的样子:

这是失败时的样子:

如您所见，当它失败时它会连续两次编译 layout.scss 文件，我的猜测是因为在第二次迭代时它没有导入其他文件，它无法按预期找到变量。

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

Answer 1

其实我发现了问题。

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

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

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

因此，此问题的解决方案是更新 list 以仅使用一个链接 指向您想要作为入口点的唯一文件，还是仅保留应用程序。 scss 文件放在文件夹的第一层，并将所有其他文件移动到子文件夹，这样它们就不会成为 list 的目标。

我现在结束了这个，它有效:

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

所以 stylesheets/ 中唯一的 scss 文件(至少在第一层深度)是 application.scss。

您可以在此处找到有关 sprockets upgrading docs 的更多信息:

You may also find that some files that were not previously compiled as top-level targets are now. For instance, if your existing app has any js files directly at ./app/assets/javascripts or css/scss files ./app/assets/stylesheets, Rails with Sprockets 4 will now compile them as top-level targets. Since they were not previously treated as such, you probably don't mean them to be; if they are .scss partials referencing variables meant to be defined in other files, it may even result in an error message that looks like Undefined variable: $some_variable.