overriding default $border-radius-lg variable in theming bootstrap 4

问题

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...

回答1:

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

来源：https://stackoverflow.com/questions/54009129/overriding-default-border-radius-lg-variable-in-theming-bootstrap-4

标签

Sass

bootstrap-4