Переопределенная начальная переменная начальной загрузки 4 $ не применяется ко всем переопределенным переменным начальной загрузки при использовании в _user-variables.scss

Question

Я делаю одну тему HTML, используя BootStrap 4.3.1.Моя цель - переопределить переменную $ primary color в моей теме _user-variables.scss, которая, как мне кажется, должна изменить все цвета в соответствии с темой _variables.scss в моей теме.Я новичок в BootStrap 4, поэтому, пожалуйста, не могли бы вы быть любезны, чтобы помочь мне вместо того, чтобы помечать / дублировать мой вопрос?

Я приведу здесь один пример того, чего я хочу достичь:

Я думаю, что, насколько мне известно, переопределение только переменной $ primary color в моем _user-variables.scss также должно изменить цвет каждого элемента, который настроен на непосредственное использование $ primary color в теме _variables.scss.Это правильно или я что-то здесь не так делаю?

Моя тема style.scss:

// Theme variables and mixins 
@import "variables";
@import "mixins";

// User Variables
@import "user-variables";

@import "../vendor/bootstrap/scss/functions";
@import "../vendor/bootstrap/scss/variables";

// Bootstrap core
@import "../vendor/bootstrap/scss/bootstrap";

Я поместил столько кода в свою тему _variables.scss, и это работает нормально:

$primary: #4cbd89;
$link-color: $primary;
$navbar-dark-hover-color: $primary;
$navbar-dark-active-color: $primary;
$navbar-light-hover-color: $primary;
$navbar-light-active-color: $primary;

Я пытаюсь переопределить вышеуказанные пользовательские переменные в _user-variables.scss, как показано ниже:

$primary: #f00f00;

Я предполагаю, что переопределение основного цвета в user-variables.scss должно измениться автоматическизначение 5 свойств, находящихся в custom.scss или мне нужно поместить это в мой user-variables.scss?Я не знаю, как лучше.Кто-нибудь может помочь мне?

Спасибо

Answer 1

В способе, которым вы определили SCSS, только цвета ссылок и ссылок панели навигации ($link-color, $navbar-dark-hover-color, $navbar-dark-active-color, $navbar-light-hover-color and $navbar-light-active-color) будут #4cbd89. Все остальные классы $primary будут использовать $primary: #f00f00, поскольку это последнее определение переопределения $ primary, которое вы используете до bootstrap.scss.

Если вы хотите, чтобы пользовательские переменные опционально (только если указано) переопределяли переменные тем, которые вам нужны ...

Дайте переменные темы флаг !default ..

$primary: #4cbd89 !default;
$link-color: $primary !default;
$navbar-dark-hover-color: $primary !default;
$navbar-dark-active-color: $primary !default;
$navbar-light-hover-color: $primary !default;
$navbar-light-active-color: $primary !default;

Поместите пользовательских переменных перед переменными темы.

// User Variables
@import "user-variables";

// Custom Theme variables and mixins 
@import "variables";
@import "mixins";

// Bootstrap core
@import "../vendor/bootstrap/scss/bootstrap";

Кроме того, нет никаких оснований для @import /scss/bootstrap/functions и /scss/bootstrap/variables перед / scss / bootstrap, поскольку /scss/bootstrap.scss уже импортирует эти файлы.

Демо: https://www.codeply.com/go/8VyTjEPq4j