Невозможно переопределить утилиты Bootstrap 5

Question

Моя структура SCSS:

main.scss:

@import '~bootstrap/scss/functions';
@import 'theme/variables';
@import '~bootstrap/scss/bootstrap';
@import 'theme/theme';

theme.scss:

...
@import "utilities"

utilities.scss:

$utilities: (
  "overflow": (
    responsive: true,
    property: overflow,
    values: visible hidden scroll auto,
  ),
);

Вышеупомянутое - это в основном пример из документации. Это должно было добавить новые классы утилит переполнения. Однако ничего не было добавлено. Есть идеи?

Answer 1

Переместите после объявления дополнительных утилит.

Подробнее

На момент написания этого ответа (май 2021 г.) для Bootstrap v5.0.0-beta3 должно работать следующее решение, как указано в официальных документах:

https://getbootstrap.com/docs/5.0/utilities/api/#changing-utilities

Переопределите существующие утилиты, используя тот же ключ.

      $utilities: (
  "overflow": (
    responsive: true,
    property: overflow,
    values: visible hidden scroll auto,
  ),
);

@import "bootstrap/scss/bootstrap";

Обратите внимание:

• то @import "bootstrap/scss/bootstrap"должен идти после объявления дополнительных коммунальных услуг.

Живая демонстрация : https://www.codeply.com/p/oX8ELBwVgB

Answer 2

Разве вам не нужно добавлять переопределения раньше @import "~bootstrap/scss/utilities";

      // Your utilities overrides
$utilities: (
    "text-decoration": (
        property: text-decoration,
        class: td,
        state: hover,
        values: none underline line-through overline,
    ),
);

@import "~bootstrap/scss/utilities";