create-react-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中的变量，并且得到了一个错误信息：未定义的变量：“$black”。

如果组件文件也使用了该文件中的变量，那么同样会出现相同的问题。我真的不想在每个组件中都导入colors。有没有一种方法可以让这三个文件成为全局文件？

为了在React中使用scss，我正在使用添加CSS预处理器（Sass、Less等）（已从此处移动）。

更新

- Person

Answer 1

在导入到index.scss时使用partials导入部分

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

文件名应该是

_colors.scss
_links.scss
_basics.scss

您可以在SASS文档的“Partial”部分中了解更多相关信息，具体请参见SASS文档。

- Roy Scheffers

---

好的，已经做到了。但是当我尝试在我的App.scss文件中使用$black时，我仍然得到未定义变量的错误。虽然现在它在basics.scss中可以工作。 - Person

你能展示一下你的树形结构吗？可能是你没有正确导入东西。 - Roy Scheffers

更新了问题。 - Person

谢谢Allan。确保将App.scss也导入到index.scss中。将包含变量的通用样式文件放在顶部，组件局部文件放在其下面。这是一个例子。这是我的一个项目，我将几个变量和组件样式导入到一个应用程序中。GitHub存储库 - Roy Scheffers

好的，我想我修复了它。问题是我有一个index.scss文件，其中我导入了所有的scss文件，然后将其导入到index.js中。我只是删除了index.scss并在App.scss中完成了所有操作，现在一切都正常了。谢谢！ - Person