When attempting to customize bootstrap using Sass, I discovered that overriding default bootstrap variables can be quite confusing. I am curious if someone could provide an explanation for the inconsistent behavior.
Some variables only seem to be overridden if they are declared before importing bootstrap, while others only take effect if defined after the import. Let me illustrate with examples of each scenario.
The variables $form-range-thumb-width and $form-range-thumb-height will only be overridden with my specified values if I declare them before importing bootstrap:
$form-range-thumb-width: 2rem;
$form-range-thumb-height: 2rem;
@import '../node_modules/bootstrap/scss/bootstrap';
However, if I do the opposite (importing bootstrap before declaring the variables), then the values have no impact and default values (1rem) are used in the compiled CSS.
One might assume that variables need to be overridden before importing bootstrap, but this is contradicted by a variable like $font-family-base. In this case, overriding the variable must occur after importing bootstrap for it to take effect.
For instance, this would work as expected:
@import '../node_modules/bootstrap/scss/bootstrap';
$font-family-base: 'Manrope';
However, the following approach would not result in the desired font override:
$font-family-base: 'Manrope';
@import '../node_modules/bootstrap/scss/bootstrap';
In the second scenario, the font family reverts to its default value. Can anyone shed light on what is causing this inconsistency?