Переопределение переменной scss путем ссылки на другую переменную

Question

Технически это не буст-пикап, это scss, но Bootstrap - контекст, в котором у меня возникают проблемы.Я изменяю значение по умолчанию некоторых значений в начальной загрузке.Одна конкретная переменная, я хочу сослаться на другую переменную начальной загрузки.

Итак, у меня есть свой собственный файл:

@import "_variable.overrides.scss";
@import "bootstrap.scss";

, мой _variable.overrides.scss выглядит так:

$secondary: lighten($primary, 10%);

Я не могу этого сделать, потому что $ primary не определен, так как я сначала импортирую свои переопределения scss.Если я сначала импортирую boostrap.scss, он не переопределяет, потому что переопределения должны предшествовать определению переменной по умолчанию.

Есть ли способ переопределить одну переменную, ссылаясь на другую переменную?

Answer 1

В основном, на этот вопрос уже отвечали до здесь и здесь .Вам нужно сначала @ импортировать любые переменные, на которые вы хотите сослаться в вашей пользовательской SCSS ..

Поскольку $primary находится в _variables.scss, вам нужно @import _variables.scss и _functions.scss (поскольку это ref'd от _variables.scss):

@import "bootstrap/functions";
@import "bootstrap/variables";

Затем, как объяснено в документации , ваши пользовательские переменные будут переопределять Bootstrap, потому что все переменные Bootstrap используютфлаг !default, что означает, что они не будут иметь приоритет над вашими пользовательскими переменными, которые импортируются за до Bootstrap.Таким образом, весь SCSS будет выглядеть (вам может потребоваться изменить пути):

@import "bootstrap/functions";
@import "bootstrap/variables";
@import "_variable.overrides.scss";
@import "bootstrap.scss";