«Ошибка: ожидаемый идентификатор» при попытке добавить утилиты с помощью Bootstrap 5. ⇐ CSS

[Anonymous]

Я хочу добавить новый класс для цвета фона.
Поэтому я выполнил этот шаг документации Bootstrap и написал следующее:

Код: Выделить всё

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

И у меня такая ошибка.

Код: Выделить всё

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

Я пытался переместить весь импорт в конец файла, но никаких изменений.
Как устранить эту ошибку?

Подробнее здесь: https://stackoverflow.com/questions/787 ... ootstrap-5