reactjs - 无法使用React应用程序访问sass变量编译错误

Question

我正在使用 create-react-app 创建一个 React 应用程序，并且我尝试按照 here 上的这些步骤来实现 SASS 预处理器。 。所以一切都很顺利，我已经开发了我的应用程序的某些部分。但出于一个非常奇怪的原因，在开发了两天之后，我现在在编译时遇到了错误，没有任何我能想象的原因。

{
  "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 无法访问变量。 Assets 导入到我的 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 文件。我也不习惯(当仅在常规 webpack 项目中使用 sass 文件时)。

Answer 1

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