переопределение переменной $ border-radius-lg по умолчанию в начальной загрузке темы 4

Question

Я использую фреймворк начальной загрузки 4. для своего проекта.

Я создаю темы, переопределяя основные переменные. Если я настраиваю переменные сетки, они работают, но если я пытаюсь обновить $border-radius-lg var, никаких изменений не произойдет, а размер по умолчанию $border-radius-lg все еще используется.

Здесь размещаются пользовательские переменные ...

@import "scss/functions";
@import "scss/variables";

// my custom variables
@import "myvars";

@import "scss/mixins";
@import "scss/root";
@import "scss/reboot";
@import "scss/type";
@import "scss/images";
@import "scss/code";
@import "scss/grid";
@import "scss/tables";
@import "scss/forms";
@import "scss/buttons";
@import "scss/transitions";
@import "scss/dropdown";
@import "scss/button-group";
@import "scss/input-group";
@import "scss/custom-forms";
@import "scss/nav";
@import "scss/navbar";
@import "scss/card";
@import "scss/breadcrumb";
@import "scss/pagination";
@import "scss/badge";
@import "scss/jumbotron";
@import "scss/alert";
@import "scss/progress";
@import "scss/media";
@import "scss/list-group";
@import "scss/close";
@import "scss/toasts";
@import "scss/modal";
@import "scss/tooltip";
@import "scss/popover";
@import "scss/carousel";
@import "scss/spinners";
@import "scss/utilities";
@import "scss/print";

Это мои пользовательские переменные в myvars файле

/* my custom bootstrap 4 vars
-------------------------------------------------- */

// these work fine when I make changes to test
$grid-columns:                12;
$grid-gutter-width:           30px;

// this doesn't change any of my large input radius
$border-radius-lg:            1rem;

Я проверил файл начальной загрузки variables и $border-radius-lg является родительской переменной $input-border-radius-lg, но после компиляции моего css радиус по-прежнему остается размером по умолчанию .3rem

Кто-нибудь знает, как заставить это работать?

Вот скриншот настроек по умолчанию ...

Answer 1

Вы должны импортировать variables после изменений, чтобы переопределить.Кроме того, поскольку вы непосредственно устанавливаете значения переменных (а не назначаете настройки из любых существующих переменных), вам не нужно сначала импортировать функции и переменные.

// my custom variables
@import "myvars";

@import "scss/functions";
@import "scss/variables";
@import "scss/mixins";
@import "scss/root";
@import "scss/reboot";
@import "scss/type";
@import "scss/images";
@import "scss/code";
@import "scss/grid";
@import "scss/tables";
@import "scss/forms";
@import "scss/buttons";
@import "scss/transitions";
@import "scss/dropdown";
@import "scss/button-group";
@import "scss/input-group";
@import "scss/custom-forms";
@import "scss/nav";
@import "scss/navbar";
@import "scss/card";
@import "scss/breadcrumb";
@import "scss/pagination";
@import "scss/badge";
@import "scss/jumbotron";
@import "scss/alert";
@import "scss/progress";
@import "scss/media";
@import "scss/list-group";
@import "scss/close";
@import "scss/toasts";
@import "scss/modal";
@import "scss/tooltip";
@import "scss/popover";
@import "scss/carousel";
@import "scss/spinners";
@import "scss/utilities";
@import "scss/print";

Демо: https://www.codeply.com/go/2hEAbv49oQ

Похожие: Как расширить / изменить (настроить) Bootstrap 4 с помощью SASS