Reactjs react create app中的全局scss变量

在我的src文件夹中，我有一个assets/styles文件夹，我的全局scss文件位于其中

在我的

index.scss

中，我这样导入它们

@import 'assets/styles/colors.scss';
@import 'assets/styles/links.scss';
@import 'assets/styles/basics.scss';

然后在index.js中，我导入编译的

index.css

问题：在

basics.scss

中，我正在使用

colors.scss

中的变量，并且得到一个错误

未定义的变量：\“$black\”

如果组件scss文件使用该文件中的变量，也会发生同样的情况。我真的不想在每个组件中导入颜色。有没有办法使这3个文件成为全局文件

为了配合SCS做出反应，我使用了这个

UPD

---

将零件导入index.scss时使用零件

@import 'assets/styles/colors';
@import 'assets/styles/links';
@import 'assets/styles/basics';

文件名应该是

_colors.scss
_links.scss
_basics.scss

---

您可以在部分部分下的中了解更多信息。

您可以使用craco。遵循此url

---

好的，我做到了。但当我尝试在App.scss文件中使用$black时，仍然会得到未定义的变量。虽然现在它可以在basics.scs中使用，但是你能展示一下你的树结构吗？可能是您没有正确导入内容。更新了问题谢谢Allan。确保将App.scss以及index.scss导入。将常规样式文件（包含变量）放置在顶部，并将零部件分区放置在其下方。这里有一个例子。这是我的一个项目，我将几个变量和组件样式导入到一个应用程序中。好的，我想我修好了。问题是我有index.scss，在那里我导入了所有的scss文件，后来我将其导入index.js。我刚刚删除了index.scss，并在App.scss中完成了所有操作，现在一切正常。谢谢