覆盖主题引导程序 4 中的默认 $border-radius-lg 变量 [英] overriding default $border-radius-lg variable in theming bootstrap 4

问题描述

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

我通过覆盖核心变量进行主题化.如果我调整我的网格变量，它们会起作用，但是如果我尝试更新 $border-radius-lg 变量，则不会发生任何变化，并且默认的 $border-radius-lg大小仍在使用中.

这是放置自定义变量的地方...

@import "scss/functions";@import "scss/变量";//我的自定义变量@import "myvars";@import "scss/mixins";@import "scss/root";@import "scss/重启";@import "scss/type";@import "scss/图像";@import "scss/代码";@import "scss/grid";@import "scss/tables";@import "scss/表单";@import "scss/按钮";@import "scss/transitions";@import "scss/下拉";@import "scss/button-group";@import "scss/输入组";@import "scss/custom-forms";@import "scss/nav";@import "scss/导航栏";@import "scss/card";@import "scss/面包屑";@import "scss/分页";@import "scss/徽章";@import "scss/jumbotron";@import "scss/警报";@import "scss/进度";@import "scss/media";@import "scss/list-group";@import "scss/close";@import "scss/toasts";@import "scss/modal";@import "scss/工具提示";@import "scss/popover";@import "scss/carousel";@import "scss/微调器";@import "scss/实用程序";@import "scss/print";

这些是我在 myvars 文件中的自定义变量

/* 我的自定义引导程序 4 变量--------------------------------------------------*///当我对测试进行更改时，这些工作正常$grid-columns: 12;$grid-gutter-width: 30px;//这不会改变我的任何大输入半径$border-radius-lg: 1rem;

我检查了 bootstrap variables 文件，$border-radius-lg 是 $input-border-radius-lg 的父变量但在我的 css 编译后，半径仍然是默认大小 .3rem

有人知道如何让这个工作吗?

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

解决方案

你应该导入 variables after 要覆盖的更改.此外，由于您是直接设置变量值(而不是从任何现有变量中分配自定义项)，因此您无需先导入函数和变量.

//我的自定义变量@import "myvars";@import "scss/函数";@import "scss/变量";@import "scss/mixins";@import "scss/root";@import "scss/重启";@import "scss/type";@import "scss/图像";@import "scss/代码";@import "scss/grid";@import "scss/tables";@import "scss/表单";@import "scss/按钮";@import "scss/transitions";@import "scss/下拉";@import "scss/button-group";@import "scss/输入组";@import "scss/custom-forms";@import "scss/nav";@import "scss/导航栏";@import "scss/card";@import "scss/面包屑";@import "scss/分页";@import "scss/徽章";@import "scss/jumbotron";@import "scss/警报";@import "scss/进度";@import "scss/media";@import "scss/list-group";@import "scss/close";@import "scss/toasts";@import "scss/modal";@import "scss/工具提示";@import "scss/popover";@import "scss/carousel";@import "scss/微调器";@import "scss/实用程序";@import "scss/print";

演示:https://www.codeply.com/go/2hEAbv49oQ>

---

相关:如何扩展/修改(自定义)Bootstrap4 与 SASS

I am using the bootstrap 4 framework for my project.

I'm theming by overriding core variables. If I adjust my grid variables, they work, but if I try and update the $border-radius-lg var, no changes happen, and the default $border-radius-lg size is still being used.

This is where custom variables are placed...

@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";

These are my custom vars in myvars file

/* 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;

I checked the bootstrap variables file and $border-radius-lg is the parent variable of $input-border-radius-lg but after my css is compiled the radius is still the default size .3rem

Does anyone know how to get the this working?

Here is a screenshot of the default vars...

解决方案

You should import variables after the changes to override. Also, since you're directly setting the variable values (and not assigning customizations from any existing variables), you don't need to import functions and variables first.

// 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";

Demo: https://www.codeply.com/go/2hEAbv49oQ

---

Related: How to extend/modify (customize) Bootstrap 4 with SASS

这篇关于覆盖主题引导程序 4 中的默认 $border-radius-lg 变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！