SassError: Undefined variable, Failed to Compile but compile seems to work

Question

我在我的 React 项目中使用 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。我还注意到其他奇怪的行为，即使我忽略了将该组件导入我的 index.scss.

，网页也会从组件 scss 文件加载样式

如有任何帮助或想法，我们将不胜感激。

Answer 1

已解决！

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

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

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

SassError: Undefined variable, Failed to Compile but compile seems to work

SassError: Undefined variable, Failed to Compile but compile seems to work

sass

reactjs

node-sass