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

Question

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

if i'm not wrong, at sass to override a variable, the default must have `!default` flag — João Deroldo, Jan 02 '19 at 16:00
`$grid-columns` is `12 !default` by default, but you should not need to declare `!default` to override the var. I can currently change `$grid-columns` without using `!default`. I've tried `!default` to my custom `$border-radius-lg` and still no change. Makes no sense. — joshmoto, Jan 02 '19 at 16:06
no i meant the bootstrap variable must have the `!default` to be override, at last it wont be changed — João Deroldo, Jan 02 '19 at 16:25
`$border-radius-lg` in bootstraps variables.scss is set to `!default` so why can I override them? — joshmoto, Jan 02 '19 at 16:27

Carol Skelly · Accepted Answer · 2019-01-02T17:39:56.573

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

Perfect man.. I am tit I aways thought that my vars needed to come after the variables file. Makes so much sense how the default work. Love the codeply example, not seen it before. Was trying to make similar demo in sassmeister but it didnt have the bs4 framework. — joshmoto, Jan 02 '19 at 16:36

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

1 Answers1

Linked