在脚本标记后的vue文件中，我正在导入如下样式：

<style scoped lang="scss" src="../../styles/scss/components/_navbar.scss"></style>

这与webpack和babel结合使用时效果很好，但我也想在scss中使用“全局”变量，所以我有要导入其他文件的main.scss文件：

@import 'abstracts/mixins';
@import 'abstracts/variables';

@import 'base/base';
@import 'base/typography';

实际上，我只是在App.vue（Vue SFC的根目录）中导入此文件，但是显然没有scoped指令：

在_navbar.scss中，我希望可以访问main.scss -> @import 'abstracts/variables';的变量

但是显然我没有，因为它会显示错误，指出变量未定义

  

未定义变量：“ $ color-grey-light”。

因此，我目前仅在_navbar.scss中再次导入变量。如何避免这种情况，但通过导入独立的.scss文件来保持这种良好的结构（至少对我而言）？