According to the documentation of Bootstrap, Sass variables in Bootstrap 4 come with the !default flag which allows you to override the variable's default value in your own Sass without modifying Bootstrap's source code. You can copy and paste variables as needed, modify their values, and remove the !default flag. If a variable has already been assigned, it won't be re-assigned by the default values in Bootstrap.
This feature works well for colors and other variables like: $primary: #ffffff;
However, not every variable with a default-flag behaves the same way. In some cases, using the !important flag is required, but that may not always be desired. Is there a workaround or am I missing something?
UPDATE
I have imported the Bootstrap file at the end of my custom.scss so the order should be correct. Despite this, I am still experiencing confusion. One example from the _variables.scss file adds to this confusion:
$gray-900: #212529 !default;
$body-color: $gray-900 !default;
Changing the color of
$body-color
directly seems impossible without using the !important tag. On the other hand, altering
$gray-900
works as expected. Removing the !default tag from this variable changes the body color seamlessly. There seems to be a piece of the puzzle that I'm missing.