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?

Looks like I have to keep those in `variables.scss`. I wonder if there is a way to keep it in `theme.scss`. — sdvnksv, Jul 31 '20 at 10:05
I had a similar problem in bs4, with variable scope overriding, not sure if this will be of any use to you, as i've not played with the bs5 alpha yet... https://stackoverflow.com/questions/54009129/overriding-default-border-radius-lg-variable-in-theming-bootstrap-4 — joshmoto, Aug 02 '20 at 02:13
Try importing `theme.scss` before `variables.scss`! That could work. — Klooven, Sep 29 '20 at 20:44

score 2 · Answer 1 · answered May 05 '21 at 11:47

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

score -1 · Answer 2 · answered Dec 30 '20 at 10:20

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 Answers2