Запретить SCSS компилировать переменные CSS - Angular-CLI

Я использую Angular5 с sass v1.3.2.

Я хочу иметь возможность изменять цвет, который широко используется в файлах scss моего одностраничного приложения во время выполнения (не путем компиляции новых файлов).

В моем _variables.css цвет определяется глобально как:

$brand: #123123;

И, например, используется как:

h1 {
    color: $brand;
}

Я узнал, что могу изменить цвет, если использую переменные CSS, такие как:

# CSS
:root {
    --brand: #123123
}

#JS
document.documentElement.style.setProperty('--brand', '#456456');
# OR
document.querySelector(':root').style.setProperty('--brand', '#456456');

Однако, чтобы сделать это с помощью SCSS, мне нужно было использовать миксин css-vars как таковой:

$brand: #123123;

:root {
  @include css-vars((
    --brand: #{$brand},
  ));
}

И используйте его как:

h1 {
    color: var(--brand);
}

Две проблемы:

• На самом деле --brand все еще не отображается в корневом каталоге.

• Кроме того, CSS, сгенерированный в <script type = "text/css"> с помощью angular-cli, нигде не содержит --brand, он фактически компилирует переменную CSS в #123123, поэтому вывод будет:

  h1 { цвет: # 123123; }

Есть идеи о том, как я могу добиться изменения глобального цвета во время выполнения? Или как получить мой CSS в :root, а затем как заставить SASS не компилировать его?

ОБНОВИТЬ

Как показал @JonUleis, нет необходимости использовать css-var. Теперь переменная --brand отображается в DOM по адресу :root.

Однако теперь строка color: var(--brand); по-прежнему не отображается в CSS, а h1 вообще не имеет цветового стиля.

После обновления node-sass до последней версии 4.9.0 с 4.8.3 он отлично заработал.