Bootstrap SCSS on NPM does not generate bg-dark classes

[TheDogHusky]

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

[TheDogHusky]

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

[julien-deramond]

I have converted your issue to a discussion first @TheDogHusky
Our .bg-* classes are generated from the $theme-colors map. In your example, you override the $theme-colors and don't define the darkkey so .bg-darkwon't be generated. I also means that your $theme-colors will generated a .bg-light-hes-blue class for instance.

So in order to make .bg-dark available, you can add the following:

$theme-colors: (
  // ...
  "dark": $dark
);

And to have access to $dark, you'll need to import variables.scss before defining the map.

Hope it can help!

[TheDogHusky]

Seems like a fix !
But if I define theme-colors after importing the variables.scss, it wont create all the variations it is supposed to right?
Or am I wrong somewhere?

A little workaround I've made until I've clarified how scss overwriting with variables.scss could work:
Copy the dark and light color values from variables.scss and add them in the theme-colors.

[julien-deramond]

The first part of how we compile Bootstrap is:

@import "functions";
@import "variables";
@import "variables-dark";
@import "maps";
// [...]

$theme-colors is defined in variables.scss but in this file, it's not used yet. The "real" work is done then in map.scss where there are loops over $theme-colors, and after that in a lot of files (root.scss, {component}.scss, etc.).

Not tested, but you probably could do something like that:

$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";

$theme-colors: map-merge($theme-colors, ("dark": $dark) );

@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/utilities";
// ... and all other imports