Bootstrap Sass : add color to map to work with all components (bg, text, border...)

Question

I have a problem with Bootstrap and Sass to add new colors to to theme map.

What I'm doing wrong ?

Thanks

I'm trying to add a color to theme-color of bootstrap framework (v5.2) in my Symfony 6.2 app.

It's working with buttons (.btn-mycolor) but doesn't work with background, text (.bg-mycolor, .text-mycolor)....

app.scss :

@import "~bootstrap/scss/bootstrap";
@import "custom";
@import "~bootstrap/scss/bootstrap";

custom.scss:

$custom-theme-colors: (
    "mycolor": #006A4E
);

$theme-colors: map-merge($theme-colors, $custom-theme-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");

$utilities-colors: $theme-colors-rgb;

$utilities-text: $utilities-colors;
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text");

$utilities-bg: $utilities-colors;
$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg");

$utilities-border: $utilities-colors;
$utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border");

Answer 1

Problem resolves !

app.scss :

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "custom";
@import "~bootstrap/scss/bootstrap";