我正在为我的项目使用 bootstrap 4 框架。
我通过覆盖核心变量来进行主题化。如果我调整网格变量,它们会起作用,但如果我尝试更新 $border-radius-lg var,则不会发生任何更改,并且默认的 $border-radius-lg
code> size 仍在使用。
这是放置自定义变量的地方...
@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
有人知道如何让它工作吗?
这是默认变量的屏幕截图...
最佳答案
您应该在要覆盖的更改之后导入变量
。此外,由于您直接设置变量值(而不是从任何现有变量分配自定义值),因此无需先导入函数和变量。
// 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
关于sass - 覆盖主题 bootstrap 4 中的默认 $border-radius-lg 变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54009129/