反应全球风格

Question

我正在构建一个反应项目并且在scss变量方面存在一些问题。

首先，我不使用css模块，所以请不要建议作为解决方案。

基本上我在组件文件夹中包含样式，但我也有一个名为styles.scss的app文件夹中存在的全局共享样式，这包括我想要的scss变量，mixins等的导入在组件文件中使用。我有分享变量的问题，我尝试将样式导入navigation.js是正确的方法吗？我喜欢一些建议。

文件夹结构是这样的（它必须是这样的，因为它是一个我无法改变的现有项目，所以请不要重组建议）

> components
   > button
   > navigation
     > navigation.scss
     > navigation.js
   > carousel
> app
   > scss
      > settings
         > mixin.scss
         > variables.scss
   > index.js
   > styles.scss

Styles.scss

 @import '/scss/settings/variables';
 @import '/scss/settings/mixins';

Variables.scss

 $black: #000;
 $white: #fff;
 $fontsize: 16px;

navigation.scss

@import '../../app/scss/settings/variables';

.nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: space-between;
    position: relative;
    background: $black;
    color: $white;
 }

注意：我使用webpack捆绑我的scss。