基于 React JS 组件的样式答案

【问题标题】：React JS Component based styling基于 React JS 组件的样式
【发布时间】：2017-01-19 05:05:08
【问题描述】：

我有这个问题，我的所有全局变量都有这些 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 中

你们是怎么解决的，找了一个小时也没找到解决办法。

谢谢！

【问题讨论】：

【解决方案1】：

只需制作一个 app.scss 文件，然后将所有 scss 文件从您的变量文件开始导入到该文件中。

我们在我的工作中做了类似的事情，并且有一个文件，我们将所有组件 scss 文件导入到其中，并且任何共享依赖项都超出了您只需导入一次的方式。主要是确保具有依赖关系的文件位于依赖文件之下。

【讨论】：

【解决方案2】：

像这样创建一个全局 scss：

global.scss => 导入colors.scss、fonts.scss、helpers.scss

并将其包含在您的根 JS 文件中。

这样，每次创建模块时，它都会有这些默认样式。

【讨论】：