Reactjs Can'；使用react应用程序无法访问sass变量编译错误

我正在使用

create react app

创建一个react app，我已经尝试通过以下步骤来实现SASS预处理器。所以一切顺利，我已经开发了我的应用程序的一些部分。但由于一个非常奇怪的原因，在已经开发了2天之后，我现在在编译时遇到了一个错误，这是我无法想象的

{
  "status": 1,
  "file": "/Users/glenngijsberts/Documents/Development/toggle/src/components/sass/assets.scss",
  "line": 2,
  "column": 9,
  "message": "Undefined variable: \"$primary\".",
  "formatted": "Error: Undefined variable: \"$primary\".\n        on line 2 of src/components/sass/assets.scss\n>> \tcolor: $primary;\n   --------^\n"
}

所以主要的问题是我现在得到了一个编译错误，因为我的

assets.scss

无法访问变量。资产在my App.scss中导入，my App.scss也导入了variables.scss

在我的App.scss文件中

//Import SCSS
@import "./sass/vars.scss";

@import "./sass/popup.scss";
@import "./sass/assets.scss";
@import "./sass/utils.scss";
@import "./sass/modal.scss";
@import "./sass/dropdown.scss";
@import "./sass/visualLine.scss";
@import "./sass/dashboard.scss";
@import "./sass/tabs.scss";
@import "./sass/projects.scss";
@import  "./sass/colors.scss";

有效的方法是：

assets.scss

//Import SCSS
@import "vars.scss";

span.brand {
    color: $primary;
} 

但当然，我不想在每个要使用scss变量的scss文件中都包含

vars

文件。我也不习惯（在常规的网页项目中只使用sass文件时）。

您必须在要全局导入的每个文件的开头名称中添加“\ux”。所以你的vars.scs应该是_vars.scs。听起来很奇怪，但很管用。 如果没有帮助，请将文件重命名为*.sass并使用sass语法。它更简单，可以100%工作