问当我和webpack捆绑时，我如何向每个variables.scss文件提供.scss？

EN

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