getting "primary": $primary-text-emphasis-dark error while converting scss to css

Question

terminal screenshot

@import "Documents/bootstrap-5.3.0-alpha2/scss/_functions.scss";
@import "Documents/bootstrap-5.3.0-alpha2/scss/_variables.scss";

@each $color , $value in $grays {
    .bg-#{$color} {
        background-color: $value;
    }
}

@import "Documents/bootstrap-5.3.0-alpha2/scss/_maps.scss";
@import "Documents/bootstrap-5.3.0-alpha2/scss/_mixins.scss";
@import "Documents/bootstrap-5.3.0-alpha2/scss/_root.scss";

I tried reordering functions and variables but it does not work .

Vibrator

Are you using webpack 5.77.0? – Lockridge

It's a breaking change in a minor Bootstrap version (5.2 - 5.3) that was fixed but not yet released. You can either import variables-dark or just downgrade to 5.2. – Metencephalon

Answer 1

@import "_variables-dark.scss" before @import "_map.scss" will work.

The primary-text-emphasis-dark variable is defined in _variables-dark.scss

Vibrator

I believe there's a dependency on variables-dark when you're adding your own maps, such as custom colors. I'm not sure if this is intended behaviour or just an alpha bug. – Stratigraphy

@NickPearce, it is not a bug. If not used, dark mode should be disabled via $enable-dark-mode variable. Detailed answer below. – Schmuck

I just added it before _maps.scss and it worked perfect for me.. thanks – Ultramicrochemistry

Answer 2

You should disable specific _variable-XXX.scss file for your given color modes, if you are not planning on using them.

Since Bootstrap 5.3 comes with dark-mode enabled (via $enable-dark-mode variable), it assumes _variables-dark.scss file to be imported before _maps.scss is.

Just add $enable-dark-mode: false after importing _variables.scss, but before importing _maps.scss and you are good to go.

Schmuck