Невозможно использовать переменные CSS (var (-BS-PrimaryColor)) в качестве основных в Bootstrap SCSS-броски «не является ⇐ CSS

[Anonymous]

Мы пытаемся использовать динамические цвета, поступающие из нашего бэкэнда, чтобы заменить основные и вторичные цвета начальной загрузки во время выполнения. Наш подход состоит в том, чтобы отобразить первичные и вторичные переменные SCSS на основе Bootstrap на пользовательские свойства CSS, чтобы мы могли обновить их в браузере: < /p>
$primary: var(--bs-primaryColor) !default;
$secondary: var(--bs-secondaryColor) !default;

$theme-colors: (
"primary": $primary,
"secondary": $secondary,
);

@function theme-color($key: "primary") {
@return map.get($theme-colors, $key);
}

:root {
@each $color, $value in $theme-colors {
--#{$color}: #{$value};
}
}

< /code>
Однако при компиляции функции Bootstrap, такие как Shade-Color () или Mix (). Выбросить ошибку: < /p>
X [ERROR] $color2: var(--bs-primary) is not a color.
212 │ @return mix(black, $color, $weight);
< /code>
шаги для воспроизведения < /strong> < /h3>

• В угловом проекте с начальной загрузкой SCSS, установите $ Primary: var (-BS-primarycolor) перед импортом. «Bootstrap/SCSS/Bootstrap»;
• Запустите сборку (ng служа или sass).
• Компиляция не удастся с приведенной выше ошибкой.

, что мы ожидали
мы ожидали,-Brestr-pry-pry-pry-pry Допустимые $ первичные, поэтому мы можем динамически обновлять цвета темы с помощью javaScript (document.documentelement.style.setProperty ('-bs-primarycolor', '#hexvalue');).
На самом деле
. Цвет, поэтому функционирует как Mix (), Shade-Color () и Tint-Color () FAIL. />
Дополнительный контекст
Мы пробовали обходные пути, такие как цветовые миксы () в чистых CSS и затенение времени выполнения в JavaScript, но для тех, кто требует rewryting bootstrap утилиты и компоненты вручную.>

Подробнее здесь: https://stackoverflow.com/questions/797 ... strap-scss