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模块中导入变量文件。