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 .

Answer 1

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

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

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.