覆盖主题引导程序4

Question

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

我正在通过覆盖核心变量来实现主题。如果我调整网格变量，它们将起作用，但是如果我尝试更新$border-radius-lg变量，则不会发生任何变化，并且仍将使用默认的$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

有人知道如何使它正常工作吗？

这是默认vars的屏幕截图...

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

---

相关：How to extend/modify (customize) Bootstrap 4 with SASS