iamshaunjp / iamshaunjp/bootstrap-5-tutorial

Lesson-19 main.scss Update for Bootstrap 5.1.0

Open
#2 2 comments 0 reactions 0 assignees View on GitHub
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.