Пользовательские переменные Bootstrap 4 не переопределяются

у меня есть основные стили.scss вот так:

 //@import "../components/bootstrap/scss/bootstrap";

// Core variables and mixins
@import "../components/bootstrap/scss/functions";
@import "../components/bootstrap/scss/mixins";
@import "components/variables";
@import "../components/bootstrap/scss/variables";

Я пытаюсь переопределить переменную успеха в my components/variables такой:

$green: #71c835 !important;

но он продолжает набирать цвет бутстрапа variables.scss что это $green: #28a745 !default;

чтобы создать четкое представление, я уже пытался переключить последовательность этих двух файлов следующим образом:

// Core variables and mixins
@import "../components/bootstrap/scss/functions";
@import "../components/bootstrap/scss/mixins";
@import "../components/bootstrap/scss/variables";
@import "components/variables";

это действительно сводит меня с ума, как я могу просто переопределить переменные bootstrap

8
bootstrap-4 sass twitter-bootstrap

3 ответов

$green: #71c835 !important; означает установите значение зеленой переменной в этот шестнадцатеричный код, а затем важно.

это не значит установите значение зеленой переменной в этот шестнадцатеричный код и игнорируйте последующие попытки изменить это значение.

вы не можете предотвратить изменение переменной.

вы должны написать свой код в правильном порядке.

если вы хотите переопределить ../components/bootstrap/scss/variables С components/variables импорт components/variables после другой.

5

используйте первый случай и удалите !default 

.....
@import "components/variables";
@import "../components/bootstrap/scss/variables";

копировать вставьте переменную, которую вы хотите переопределить, и измените значение. и удалить . Скомпилируйте его снова.

на !default атрибут работает как обратный !важный. Таким образом, он принимает значение ранее объявленной переменной. поэтому удалите !default

!important; //всегда побеждает.

!default; / / если var уже назначен, возьмите его вместо этого. -ссылка

теперь components/variables

 $green:   #71c835;

и ../components/bootstrap/scss/variables

 $green:   #28a745;
2

возможно, вы создадите переопределение.scss и поставить подол после того, как вы переменные.scss

@import "../components/bootstrap/scss/variables.scss";
@import "custome/scss/override.scss";

переопределить код.scss:

 $green: #you_code;
1