SassError：未定义的变量，无法编译但编译似乎有效答案

【问题标题】：SassError: Undefined variable, Failed to Compile but compile seems to workSassError：未定义的变量，无法编译但编译似乎有效
【发布时间】：2021-08-20 10:25:05
【问题描述】：

我在我的反应项目中使用 node-sass。我已经设置了一个 index.scss，其中包含我的变量、mixin 和所有组件的导入。 index.scss 设置为编译为 index.css。

现在，我在 index.scss 的顶部导入了一个名为 _variables.scss 的文件：

// index.scss

@import "styles/variables";
@import "components/Button/Button";

在我的 Button.scss 中，我设置了 color: $red_hero; 并在我的控制台中收到此错误：

Compiled src/index.scss to src/index.css.
Compiling...
Failed to compile.


SassError: Undefined variable: "$red-hero".

对我来说奇怪的是，它以前可以工作，但现在不再工作了。更诡异的是，编译后的 index.css 渲染正确，页面却拒绝渲染：

// index.css

.Button {
  color: #A33343;
}

我的猜测是，这是 sass 的内部问题，并且网页没有像应有的那样加载 index.css。我还注意到其他奇怪的行为，即网页从组件 scss 文件加载样式，即使我忽略了将该组件导入我的 index.scss。

任何帮助或想法将不胜感激。

【问题讨论】：

标签： reactjs sass node-sass

【解决方案1】：

解决了！

在解决问题的时间比我愿意承认的要多得多之后，我将问题缩小到仅在使用包 generate-react-cli 时发生。自动生成的组件在 .js 文件的顶部有一行，用于导入它的 scss 文件。

我的设置依赖于手动将每个组件 scss 文件导入到一个根 scss 文件中，该文件可以编译为一个常规 css 文件，其中将导入到带有变量的文件的顶部 index.scss 使这些变量可供所有人访问其他 scss 文件。当单个组件导入它自己的带有变量的 scss 文件时，编译器不知道如何评估它，因此它崩溃了。

解决方案，不要从除主 .scss 文件之外的任何地方导入 scss 文件。

【讨论】：