iamshaunjp / iamshaunjp/bootstrap-5-tutorial
Lesson-19 main.scss Update for Bootstrap 5.1.0
- Dominant language
- No language data
- Stars
- 404
- Forks
- 298
- PR merge metrics
- No merged PRs in 30d
Description
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';
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.