Rails SCSS 全局变量答案

【问题标题】：Rails SCSS global variablesRails SCSS 全局变量
【发布时间】：2020-12-04 13:26:30
【问题描述】：

我已经将我的项目设置为将 Bootstrap 和 scss 与 Webpacker 一起使用，但是，每当我在本地启动服务器时，我都会收到此错误：

ActionView::Template::Error (Error: Undefined variable: "$secondary-accent".
        on line 76:23 of app/assets/stylesheets/_hero.scss
>>   border: solid 0.5px $secondary-accent;

如果我进行硬刷新，这个错误实际上会在本地消失，但当然，Capistrano 并没有那么宽容，我还是想弄清楚这个问题。

在我的/app/javascscript/ 文件夹中，我有一个src/style.scss 文件，用于导入所需的样式表。

@import '../../assets/stylesheets/_globals.scss'; //import globals first so the values propagate to Bootstrap
@import '~bootstrap/scss/bootstrap'; //import bootstrap
@import '../../assets/stylesheets/application.scss' //import everything else;

/assets/stylesheets/application.scss 看起来像：

@import '_navbar';
@import 'actiontext';
@import '_hero';
@import 'comments';
@import 'static_pages';

body {
  font-family: $body-font;
  font-size: $standard;
}

当然，摆脱这种情况的简单方法是在每个部分中添加@import 'globals'，但这似乎不符合 sass 方式。我真的不想在每个.scss 文件的顶部添加@import 'globals'，目前这没什么大不了的，但随着项目的增长和样式的复杂性增加，可维护性可能会成为一个令人头疼的问题。我以为 Webpacker 会处理这个问题，我错了吗？我在设置中遗漏了什么吗？

附言。我意识到这个问题已经被问过几十次了，但它们似乎都是针对旧版本的 Rails，或者解决方案不适用于我（例如从 application.css 中删除 require 树

【问题讨论】：

标签： sass ruby-on-rails-6 webpacker

【解决方案1】：

通过稍微收紧我的 Webpacker 设置解决了这个问题。

最大的问题是安装scss 我认为在我的gemfile 中安装sass-rails 就足够了，但我还需要yarn add scss。我不需要只在application.scss 中导入src/style.scss 中的全局变量。

【讨论】：

那么您究竟是如何收紧 Webpacker 的呢？我也遇到了这个问题，通过yarn添加scss也没有解决。
伙计，已经有一段时间了，修复仍然感觉像是在黑暗中拍摄，我将在今晚返回 PR 并尝试为您找到答案。