Lesson-19 main.scss Update for Bootstrap 5.1.0

[hkatt81]

Hey Shaun,
Loving your tutorial, but I found a little issue here. The way Bootstrap 5.1.0 works with $theme-colors customisation DOES NOT apply to all the classes properly if done how you have recommended. So when I tried, bg-altlight class was not generated and didn't work.

I found this fixed the below issue;
(Main fix being you need to actually merge with the rgb, utility, text and bg colors as well as the $theme-colors)

// custom variable values
$primary: #c29938;
$light: #fbf5e5;

// import the functions & variables
@import "../node_modules/bootstrap/scss/_functions";
@import "../node_modules/bootstrap/scss/_variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// custom theme colours
$custom-theme-colors: (
"altlight": #f2ebfa,
"altdark": #522192
);

// merge the maps to add new theme colors
$theme-colors: map-merge($custom-theme-colors, $theme-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");

// import bootstrap
@import '../node_modules/bootstrap/scss/bootstrap';

[rughjm]

@hkatt81 Thank you, this fixed the same issue for me.

[anessheremeti]

I did all the same steps but when i change the primary to another color my css file is not generating any new changes and also when I press live Sass it just says Watching ....