Assigning a variable to a variable in bootstrap using custom.scss

Question

I'm looking an answer for half a day now. I'm trying to change $primary variable value from default $blue to $orange variable. If I do it like in the docs:

$primary: red;
@import '../bootstrap-5.2.3/scss/_variables';
@import "../bootstrap-5.2.3/scss/bootstrap";

It works but it's not what I'm looking for. I'm trying to assign a variable to a variable like this:

@import '../bootstrap-5.2.3/scss/_variables';
@import "../bootstrap-5.2.3/scss/bootstrap";
$primary: $orange;

However I'm trying to do this, either by importing bootstrap after or before the declaration, there is no way I'd have an $orange variable assigned to $primary after compilation to css.

What am I doing wrong ? Thanks.

Answer 1

For the latest Bootstrap 5.3, the order would be...

@import "functions"; // required
@import "variables"; // required because we're referring to existing $orange var

$primary: $orange; // set primary

// merge with existing theme-colors map
$theme-colors: map-merge($theme-colors, (
  "primary": $primary
));

@import "bootstrap";

https://codeply.com/p/RaDCJdXvE0

Also see: How to change the bootstrap primary color?