Bootstrap SASS - overriding theme colors

Question

I'm using the Bootstrap 4.6 SASS files, and overriding some of the default values. I'm following the instructions here where it shows an example:

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

This specific example works, because the $body-bg variable isn't used until the "Optional" imports below are imported.

However, I'd like to change the shade of blue that's used as the primary theme. If I attempt to do this by defining $blue: #1122ff; in the section marked "your variable overrides", it has no discernable effect. That's because the "variables" import defines a default value for $blue and a bunch of other variables that are derived from it (like $primary). Since that file is imported above the "your variable overrides" section, the re-definition of the variable comes too late.

I can simply move my variable definition higher up (before the variables import), and that works, but not only is it different from the provided example, the documentation seems specifically to rule that out:

Variable overrides must come after our functions, variables, and mixins are imported, but before the rest of the imports.

I'm confused. It seems logical to define variables before the variables import, otherwise what would be the point in the variables in that file being defined with !default?

Is the documentation just wrong, or am I missing something? Will there be unpleasant side-effects if I declare $blue right at the top of the file?

Answer 1

Make those variables "!important" that you define. It will override the variable definition.

// Your variable overrides
$body-bg: #000 !important;
$body-color: #111 !important;