在与webpack捆绑时,如何为每个.scss文件提供variables.scss？

Question

这是我当前的项目目录结构,因为我想不出更好的方法来组织每个组件都有自己的.scss文件的用例,但是,整个应用程序都是包含全局variables.scss文件的主题.目前,我正在导入variables.scss每个组件.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 { ... }

我知道我也可以导入目录中的所有组件.scss文件,main.scss但是这样做会破坏css模块的目的,并且能够在组件级别导入名称间隔等.

Answer 1

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

依赖关系

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

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