Bootstrap SCSS on NPM does not generate bg-dark classes
TheDogHusky opened this issue · comments
Prerequisites
- I have searched for duplicate or closed issues
- I have validated any HTML to avoid common problems
- I have read the contributing guidelines
Describe the issue
I'm tryna customize bootstrap for a website I'm building but I've came accross an issue:
When I import bootstrap's CSS normally, downloading or from a CDN I can use the .bg-dark
class, but when I use SCSS and import bootstrap's SCSS, the bg-dark class isn't created.
That makes a big issue on my website as my navbar is using this class.
I've searched in my generated css (ctrl+f) "bg-dark" and did not found the class.
Here is the scss part where I import bootstrap:
@import "../node_modules/bootstrap/scss/functions";
$gold: #ffcc00;
$red: #e72020;
$yellow: #c99e12;
$blue: #1e90ff;
$dark-blue: #093085;
$hestia-blue: #3b4776;
$lighty-hestia-blue: #b2d3fa;
$green: #288509;
$greeny: #9BA841;
$theme-colors: (
"primary": $gold,
"secondary": $hestia-blue,
"tertiary": $lighty-hestia-blue,
"success": $green,
"info": $blue,
"warning": $yellow,
"danger": $red,
"blue": $blue,
"red": $red,
"yellow": $yellow,
"gold": $gold,
"hestia-blue": $hestia-blue,
"light-hes-blue": $lighty-hestia-blue,
"green": $green,
"greeny": $greeny,
"dark-blue": $dark-blue,
);
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";
@import "../node_modules/bootstrap/scss/bootstrap";
@import "../node_modules/bootstrap/scss/utilities";
// rest of customization after those statements
Reduced test cases
I cannot do a reduced test case as I cannot seem to make bootstrap work with customization with SCSS on codepen and don't know how to make one that works either.
What operating system(s) are you seeing the problem on?
Windows
What browser(s) are you seeing the problem on?
Chrome
What version of Bootstrap are you using?
5.3.3
I found a workaround using bg-secondary-subtle
to do the same thing, but it'll be better if the bg-dark
class worked.