reactjs - 与 webpack 捆绑时如何为每个 .scss 文件提供变量.scss？

Question

这是我当前的项目目录结构，因为我想不出更好的组织方式来组织每个组件都有自己的 .scss 文件的用例，但是，整个应用程序都是包含全局 variables.scss 文件的 Fed 主题。目前，我正在每个组件的 .scss 文件顶部导入 variables.scss 文件，我想知道这种工作流程的最佳实践是什么。

/ app
  / components
     / Navigation
       - Navigation.js
       - Navigation.scss
/ styles
  - globals.scss
  - variables.scss
  - main.scss

我的 main.scss 文件基本上是 @import 其目录中的所有 .scss (例如 variables.scss、globals.scss 等)，但是，我需要以下内容才能访问每个组件内部的变量:

 // Navigation.scss
 @import '../../styles/variables.scss

 .class { ... }

我知道我还可以导入 main.scss 目录中的所有组件 .scss 文件，但这违背了拥有 css 模块并能够导入它们的目的在组件级别的名称间距等。

Answer 1

这是可能的，但我不推荐。

依赖关系

每个组件都有它的依赖项。您必须在每个 Sass (ES6/React.js) 模块中需要多个依赖项。这就是 Webpack 解决依赖关系的方式。

我建议向 Webpack/Sass 配置添加解析路径，并在每个 Sass 模块中导入变量文件。