Sass变量未导入部分

Question

Saas可以从theme.scss中的main.scss导入变量，但不能将其从theme.scss中的变量导入_nav.scss部分。

我正在尝试制作一个具有多个主题的项目。我想要一个主_nav.scss文件，该文件创建没有颜色的导航。 nav.scss将导入到color变量所在的themeOption.scss和themeTwoOptions.scss中。

当我尝试编译sass时，它将在nav.scss文件中引发错误，因为它找不到在themeOption.scss中定义的变量。

服务器正在nuxt（vue.js）上运行。 根据我的记忆，我曾尝试将零件制成常规文件，然后将其导入themeOption.scss的底部。 我在这里上传了我的错误消息的img：

_nav.scss

#navHeader {
  .branding-bg,
  .branding-bg:hover {
    background-color: $realmDark; /* When this 1st variable is seen it throws an error while compiling. */
    border-color: $realm;
    text-align: center;
  }
  .branding {
    height: 90%;
    padding: 10px;
    padding-top: 20px;
    margin: 0px auto;
  }
}
#navHeader,
.branding-bg,
#topBarNav ul li {
  height: 100px;
}

themeOption.scss

@import 'main.scss';
$realm: #015898;
$realmDark: #015898;

.editUser-Modals {
  .btn-primary {
    background-color: $realm;
    border-color: $realm;
    color: #fff;
    &:hover {
      background-color: $realmDark;
      border-color: $realmDark;
      color: #fff;
    }
  }
  .bg-primary {
    background-color: $realm;
    border-color: $realm;
    color: #fff;
  }
}

@import '_nav.scss';

themeTwoOption.scss

@import 'main.scss';
$realm: #015dd12;
$realmDark: #01567;

.editUser-Modals {
  .btn-primary {
    background-color: $realm;
    border-color: $realm;
    color: #fff;
    &:hover {
      background-color: $realmDark;
      border-color: $realmDark;
      color: #fff;
    }
  }
  .bg-primary {
    background-color: $realm;
    border-color: $realm;
    color: #fff;
  }
}

@import '_nav.scss';