Создайте собственный градиент в начальной загрузке 4, используя функцию SASS theme-color-level

Question

Я установил переменные темы Bootstrap 4 следующим образом:

// custom-theme.scss
$primary: green;
$secondary: purple;

Затем пользовательские переменные, такие как:

// custom-variables.scss
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";

$idi-primary-12: theme-color-level(primary, -12);

Затем импортируем все следующим образом:

//main.scss,
@import "./bootstrap-theme";
@import "./custom-variables";
@import '~bootstrap/scss/bootstrap';

Это обновляет классы начальной загрузки, такие как btn-primary и text-secondary AS EXPECTED (приятно);

Но пользовательская переменная ($ idi-primary-12) основана на моем $основной не работает.Я использовал функцию theme-color-level SASS, как указано здесь в официальной документации .

Когда я использую это в своем компоненте,

// myComponent.scss
@import "../custom-variables";

.myUserInfo {
    background-color: $idi-primary-12;
    color: color-yiq($idi-primary-12);
}

Я получаю BLUE shade (это значение по умолчанию в bootstrap / scss / variables.scss ). Источник Github вместо моего переопределения ( зеленый - как указано выше)

Вопрос: Как использовать функцию уровня цвета темы, чтобы использовать мой $ primary (зеленый) переменная для создания более легкой версии этого зеленого?(а не синий по умолчанию).

Дополнительная информация: официальная документация для функций SASS

1. theme-color-level использует theme-color
2. theme-color извлекает из объекта $theme-colors по ключу (я использую primary )
3. $theme-colors primary ключ установлен на $primary (Github для $ theme-colors )
4. $primary установлен на blue ( Github для $ primary )
5. Это должно иметьбыть переопределенным моим $primary = green; из custom-theme.scss .Вот почему btn-primary работает.(показано зеленым цветом).Но почему он не использует ту же переопределенную переменную для создания моей $idi-primary-12 переменной?

Answer 1

theme-color-level неожиданно не использует переопределенное значение $ primary. Вместо этого он принимает значение по умолчанию $ primary (синий).

Я смог использовать другую функцию, которая напрямую работает с моим переопределенным $ primary значением.

// custom.scss
$primary: green;

darken($primary, 10% )
lighten($primary, 10% )

Ссылка

Answer 2

Я думаю, у вас есть опечатка, $ первичная вместо основной

$idi-primary-12: theme-color-level($primary, -12);