Sass переменные не импортируются в частичное

Question

Saas может импортировать переменные из main.scss в theme.scss, но не будет импортировать переменные из theme.scss в парциальную _nav.scss.

Я пытаюсь создать проект с несколькимитемы.Я хочу иметь основной файл _nav.scss, который создает навигацию без цветов.Nav.scss будет импортирован в themeOption.scss и themeTwoOptions.scss, где есть переменные для цветов.

Когда я пытаюсь скомпилировать sass, он выдает ошибку в файле nav.scss, потому что он может 't найти переменную, определенную в 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';