upon trying to customize bootstrap using Sass I noticed that overriding default bootstrap variables seems to work in an incoherent way, and would like if someone could explain what exactly is going on that is causing this behavior.
some variables seem to only get overriden if they are declared before importing bootstrap, other variables seem to only get overriden if they are defined after bootstrap has been imported. I'll show an example of each.
the variables $form-range-thumb-width and $form-range-thumb-height are only overriden with the values I provide if bootstrap is imported after declaring the variables with my own values like so:
$form-range-thumb-width: 2rem;
$form-range-thumb-height: 2rem;
@import '../node_modules/bootstrap/scss/bootstrap';
if on the other hand I do this (place the import before overriding the two variables):
@import '../node_modules/bootstrap/scss/bootstrap';
$form-range-thumb-width: 2rem;
$form-range-thumb-height: 2rem;
then the values I use have no effect and the two variables assume their default values (1rem in this case) upon compiling to regular css.
At this point you would assume that in order to override a vairable you need to do it before importing bootstrap But then the exact opposite behavior is portrayed with a variable like $font-family-base. in this case you would need to override the variable after importing bootstrap in your scss otherwise overriding has no effect.
so for example this would work and have the font overriden correctly
@import '../node_modules/bootstrap/scss/bootstrap';
$font-family-base: 'Manrope';
but this would not.
$font-family-base: 'Manrope';
@import '../node_modules/bootstrap/scss/bootstrap';
in the second case the font family will assume its default value.
Is anyone able to explain what is causing this behavior?