在主题引导程序4中覆盖默认的$ border-radius-lg变量

约什本

我正在为我的项目使用bootstrap 4框架。

我通过覆盖核心变量来主题化。如果调整网格变量,它们将起作用,但如果尝试更新$border-radius-lgvar,则不会发生任何变化,并且$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

有谁知道如何使这个工作?

这是默认变量的屏幕截图...

在此处输入图片说明

齐姆

您应该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


相关:如何使用SASS扩展/修改(自定义)Bootstrap 4

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

是Safari中border-radius的bug?

CSS Border Radius问题

border-radius在MacOS / -webkit-中不起作用

CSS Border Radius Second Radius说明

border-radius和-webkit-border-radius之间的区别

更圆角-Border Radius CSS

Chrome浏览器的“链接”按钮中的Border-Radius不起作用

CSS:IE 中的多个 bgs、bg clip 和 border-radius

CSS border-radius xy是否存在?

CSS过渡移除border-radius属性

Border Radius Bottom Bug React Native

CSS border-radius:20px

字体真棒:Fa Bars-Border Radius

当父窗格在JavaFX中具有-fx-border-radius时,子窗格css样式

如何在vuetify中更改v-data-table标头的backkground-color和border-radius?

如何在shinyApp中将border-radius设置为valueBox()?

CSS Arch是否可以使用border-radius?

border-radius使div高于其应有的范围

CSS:border-radius //插入背景;白角

使用`border-radius`创建一个圆

到达 div 末尾时是否可以设置“border-radius”?

Border Radius生成器无故停止工作

border-top-left-radius和border-top-rigth-radius没有得到预期的结果

即使使用border-collapse:separate,border-radius也不会应用于<tr>行标记

Firefox中使用border-radius和border的圆上的针迹:虚线

无需使用border-radius属性即可在altova stylevision或xsl-fo中创建动态自由流表的曲线边框

Firefox无法使用以下方式正确呈现:border-radius,box-shadow和border

如何将border-radius属性与border-image一起使用以弯曲拐角?

我使用 border-radius 来环绕我的图像元素,但它没有完全圆形