react-create-app 中的全局 scss 变量

Question

在我的 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 的变量并收到错误 Undefined variable: \"$black\".

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

为了在响应中使用 scss，我正在使用这个 link

UPD

Answer 1

将零件导入 index.scss

时使用分音符

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

文件名应该是

_colors.scss
_links.scss
_basics.scss

您可以在部分部分下的 SASS docs 中阅读更多相关信息。

Answer 2

Global scss variables in react-create-app