"Error: Expected identifier" when trying to add utilities with Bootstrap 5

Question

I want to add a new class for a background-color. Thus, I followed this step of Bootstrap documentation and I wrote that:

@import "./BOOTSTRAP-CSS/scss/functions";
@import "./BOOTSTRAP-CSS/scss/variables";
@import "./BOOTSTRAP-CSS/scss/variables-dark";
@import "./BOOTSTRAP-CSS/scss/maps";
@import "./BOOTSTRAP-CSS/scss/mixins";
@import "./BOOTSTRAP-CSS/scss/utilities";

$third: #226C77;

$utilities: map-merge(
    $utilities, 
    (
        "bg-third": (
            property: background-color,
            class: bg-third,
            values: $third
        )
));

@import "./BOOTSTRAP-CSS/scss/bootstrap.scss";
@import "bootstrap/scss/utilities/api";

And I have this error.

Error: Expected identifier.
  ┌──> static\CUSTOM\SCSS\BOOTSTRAP-CSS\scss\mixins\_utilities.scss
67│         .#{$property-class + $infix + $property-class-modifier} {
  │            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
  ╵
  ╷
1 │ .bg-third-#226C77
  │            ━ error in interpolated output
  ╵
  static\CUSTOM\SCSS\BOOTSTRAP-CSS\scss\mixins\_utilities.scss 67:12   generate-utility()
  static\CUSTOM\SCSS\BOOTSTRAP-CSS\scss\utilities\_api.scss 13:9       @content
  static\CUSTOM\SCSS\BOOTSTRAP-CSS\scss\mixins\_breakpoints.scss 68:5  media-breakpoint-up()
  static\CUSTOM\SCSS\BOOTSTRAP-CSS\scss\utilities\_api.scss 5:3        @import
  static\CUSTOM\SCSS\BOOTSTRAP-CSS\scss\bootstrap.scss 51:9            @import
  static\CUSTOM\SCSS\_new_utilities.scss 20:9                          @import
  static\CUSTOM\SCSS\custom.scss 7:9                                   root stylesheet

I tried to move all imports to the bottom of the file but no changes.

How to solve this error ?

Answer 1

As per docs, the list of values is prepended to the class name, so in your case producing:

.bg-third-#226C77

which is not valid.

So, you can either use map, where you can use null as key, to prevent prepending:

values: (null:$third)

which will produce:

.bg-third { ... }

or you can add some key:

values: (teal:$third)

producing

.bg-third-teal { ... }

full code using null:

@import "./BOOTSTRAP-CSS/scss/functions";
@import "./BOOTSTRAP-CSS/scss/variables";
@import "./BOOTSTRAP-CSS/scss/variables-dark";
@import "./BOOTSTRAP-CSS/scss/maps";
@import "./BOOTSTRAP-CSS/scss/mixins";
@import "./BOOTSTRAP-CSS/scss/utilities";

$third: #226C77;

$utilities: map-merge(
    $utilities, 
    (
        "bg-third": (
            property: background-color,
            class: bg-third,
            values: (null:$third)
        )
));

@import "./BOOTSTRAP-CSS/scss/bootstrap.scss";
@import "bootstrap/scss/utilities/api";

result:

.bg-third{background-color:#226c77 !important}