Установка переменной SASS в переменную CSS3 приводит к ошибке в Bootstrap 4

Question

StackBlitz ссылка

По какой-то причине при установке переменных Bootstrap в переменные CSS3 мое приложение Angular 6 разрывается со следующей ошибкой

Это действительно первое использование переменной SCSS в файле начальной загрузки, поэтому он явно не доволен тем, как я его настраиваю. Я сделал очень простой StackBlitz , чтобы повторить проблему. Посмотрите на styles.scss.

По сути, именно это и вызывает эту ошибку.

styles.scss

:root{
  --primary: #0f0;
}

$primary: var(--primary); // Broken
// $primary: #f00;  // Working

@import '../bootstrap/scss/bootstrap';

Любые идеи о том, почему Bootstrap может не быть доволен этим?

Answer 1

Нашел ответ.

Похоже, вы не можете использовать переменные css в функциях SASS из-за динамической природы переменных css и того факта, что sass является препроцессором.

См. Этот стек для более подробного объяснения.