Current sulution "customize/sass" is wrong - SASS variable don't set value by reference as CSS

[WinterSilence]

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

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

if you do this you change only current values of variable, no effect on variables used that's values to generate self values.

Right solution is:

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

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

Example

current solution:

@import "variables";
// `_variables.scss`:
// $a: 1 !default;
// $b: $a + 10 !default;
$a: 2;
@debug $a;  // display 2
@debug $b;  // display 11 - invalid

right way:

$a: 2;
// `_variables.scss`:
// $a: 1 !default;
// $b: $a + 10 !default;
@debug $a;  // display 2
@debug $b;  // display 12 - valid

[ffoodd]

Duplicates #33070.

There are a few related issues and discussions about the best way to override variables and how to improve Bootstrap customization ease.

Closing this as duplicate but be sure we're aware of this, and feel free to comment in related issues.