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

Question

在我的 src 文件夹中，我有 asset/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个文件全局化？

为了在 react 中使用 scss，我正在使用 Adding a CSS Preprocessor (Sass, Less etc.) (自从搬家 here )。

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中阅读更多相关信息。在“部分”部分下。