Sass 在主题化引导4中覆盖默认$border radius lg变量
我正在为我的项目使用Bootstrap4框架Sass 在主题化引导4中覆盖默认$border radius lg变量,sass,bootstrap-4,Sass,Bootstrap 4,我正在为我的项目使用Bootstrap4框架 我通过覆盖核心变量来创建主题。如果我调整网格变量,它们会起作用,但如果我尝试更新$border radius lgvar,则不会发生任何更改,并且仍然使用默认的$border radius lg大小 这是放置自定义变量的位置 @import "scss/functions"; @import "scss/variables"; // my custom variables @import "myvars"; @import "scss/mixin
我通过覆盖核心变量来创建主题。如果我调整网格变量,它们会起作用,但如果我尝试更新
$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;
我检查了引导
变量
文件,$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";
演示:
相关:如果我没有错,在sass中重写变量时,默认值必须有!默认的标志$grid columns
为12!默认情况下
,但您不需要声明!默认值
覆盖变量。我当前可以在不使用的情况下更改$grid columns
!默认值
。我试过!默认
为我的自定义
$border radius lg
,但仍然没有更改。没有意义。不,我的意思是引导变量必须具有!默认值
被覆盖,最后在引导变量中它不会被更改。$border radius lg
。scss设置为!默认值
那么为什么我可以覆盖它们呢?完美男人。。我一直认为我的变量需要在变量文件后面。默认值的工作方式非常合理。喜欢codeply示例,以前从未见过。曾试图在sassmeister中进行类似的演示,但它没有bs4框架。