twbs / bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

Home Page:https://getbootstrap.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Bootstrap SCSS on NPM does not generate bg-dark classes

TheDogHusky opened this issue · comments

commented

Prerequisites

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

commented

I found a workaround using bg-secondary-subtle to do the same thing, but it'll be better if the bg-dark class worked.