javascript - 基于 React JS 组件的样式

Question

我有这个问题，我的所有全局变量都有这些 scss 文件:

colors.scss
fonts.scss
helpers.scss

我的组件有这些 scss 文件，并将其导入到 .jsx 文件之上:

header.scss
footer.scss
searchbar.scss

我的所有基于组件的 scss 文件中的问题，我需要以这种方式导入 color.scss 和 helpers.scss，它将多次包含在 header.scss、footer.scss 和 searchbar.scss 中

你们是如何解决这个问题的，已经搜索了一个小时，但没有找到任何解决方案。

谢谢!

Answer 1

只需制作一个 app.scss 文件并将所有 scss 文件导入到该文件中，并以您的变量文件开头。

我们在工作中做了类似的事情，我们有一个文件，我们将所有组件 scss 文件导入到其中，并且任何共享的依赖项都高于那些你只需要导入一次的依赖项。主要是确保有依赖的文件在依赖文件下面。