SassError:未定义变量,未能编译,但编译似乎可以工作

我在react项目中使用节点sass。我已经建立了索引。包含变量、mixin和所有组件的导入的SCS。索引。scss设置为编译到索引。css。

现在,我有一个名为_variables的文件。我在索引顶部导入的SCS。scss:

// index.scss

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

在我的按钮里。我正在设置scss color: $red_hero; 在我的控制台中得到这个错误:

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


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

对我来说奇怪的是,它过去可以工作,但现在已经不行了。更奇怪的是,编译后的索引。css正在正确呈现,但页面拒绝呈现:

// index.css

.Button {
  color: #A33343;
}

我猜这是sass的内部问题,网页没有加载索引。它应该是css。我还注意到了其他奇怪的行为,网页从组件scss文件加载样式,即使我忽略了将该组件导入索引。scss。

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