Cannot override Bootstrap 5 utilities

Question

My SCSS structure:

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,
  ),
);

The above is basically an example from the documentation. This was supposed to add new overflow utilities classes. However, nothing was added. Any ideas?

user_1135971 · Answer

Move the @import "bootstrap/scss/bootstrap" after the declaration of the additional utilities.

More details

At the time of writing this answer (May 2021), for Bootstrap v5.0.0-beta3, the following solution should work, as stated in the official docs:

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

Override existing utilities by using the same key.

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

@import "bootstrap/scss/bootstrap";

Please note that:

the @import "bootstrap/scss/bootstrap" should go after the declaration of the additional utilities.

Live demo: https://www.codeply.com/p/oX8ELBwVgB

user_4460977 · Answer

Don't you have to add overrides before @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";

Cannot override Bootstrap 5 utilities

2 Answers