这是我当前的项目目录结构，因为我想不出更好的方法来组织每个组件都有自己的.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 module并能够在组件级别导入它们以进行名称间距等的目的。