Как установить переменные в локальных файлах sass, которые переопределяют настройки в общем sass при использовании загрузчика webpack

Question

У меня есть сайт, на котором есть три базовых приложения, в которых используется множество одинаковых компонентов, но их стили немного отличаются в каждом приложении.

Итак, я создал стили сайта, которые импортируются с помощью загрузчика sass в веб-пакете

мой путь

const csspath = path.resolve(__dirname,  './src/styles/main.scss');

мои грузчики

{
   loader: 'sass-loader',
   options: {
    sourceMap: true
   }
},
{
    loader: 'sass-resources-loader',
    options: {
      resources: [csspath]
    }
}

внутри одного из моих файлов sass у меня есть следующее

$navBackground: $black;
$navForeground: $white;
$itemSize: 60px;

.NavHeader {
    position: sticky;
    top: 0;
    z-index: 1071;
    background-color: $navBackground;
    color: $navForeground;
    width: 100vw;
    height: $itemSize;
}

У меня также есть некоторые CSS, которые я импортирую внутри своих компонентов, например

import './Header.style.scss';

Если я добавлю эти переменные в стиль заголовка

$navBackground: $black;
$navForeground: $white;

он компилируется нормально, но если я удаляю эти переменные из глобальных файлов sass и сохраняю переменные только в моем локальном Header.style.scss, я получаю сообщение об ошибке

Сборка модуля не удалась (из ./node_modules/sass-loader/lib/loader.js):

background-color: $navBackground;
                 ^
  Undefined variable: "$navBackground".
  in /Users/bryanrasmussen/projects/dc_frontend/src/styles/components/_header.scss (line 8, column 23)

Полагаю, очевидная проблема заключается в том, что локальные файлы sass в компонентах загружаются с помощью загрузчика sass-loaders, а ресурсы, которые являются глобальными и не привязаны к компоненту, загружаются с помощью sass-resources-loader, поэтому эти загрузчики ничего не знаю друг о друге. Таким образом, вопрос в том, могут ли они быть каким-либо образом объединены или в любом случае, что sass-resources-loader может знать о файлах sass, загруженных с помощью sass-loader?

Answer 1

Я нашел решение, которое мне особенно не нравится, поскольку оно несколько не элегантное, но я все равно опубликую его на случай, если у кого-то возникнет такая же проблема.

В компонентах, которые должны повторно использовать стили,например, заголовок, который я делаю

import './Header.style.scss';

в компоненте, а в sass я устанавливаю необходимые переменные и импортирую многоразовый sass

$

navBackground: $black;
$navForeground: $white;
$userColor: $white;
$navItemColor: $white;
$currentSelectedEmphasizeColor: $green;
$hamburgerCloserColor: $white;
$burgerMenuBackground: $black;
$navMenuLinkColor: $white;

@import '../../../styles/components/header';

Я удаляю стили / компоненты / стили заголовка из основного загруженного ресурса, так что у меня все еще есть загрузчик ресурсов sass, который предоставляет стили кросс-приложений, но все, что нужно установить в каждом отдельном приложении, должно будет загружать повторно используемые стили компонентов иустановите переменные локально, чтобы не возникало ошибок в main.scss во время компиляции.