'Bootstrap 5: Can not use utilities

I have updated my project from Bootstrap 4.5 to Bootstrap 5. I did this by simply overwriting all the old bootstrap files with npm install bootstrap@next. Now I have the problem that I can't use the bootstrap utilities anymore. They just don't seem to be compiled into the stylesheet, even though they are imported.

My app.scss file:

@import "variables";

@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/utilities";

For example, if I now try to hide in element with .d-none, then this has no effect. The compiled stylesheet also does not contain a utility class.

csstwitter-bootstrapsassbootstrap-5


Solution 1:[1]

There is a change in file structure in BS5 (vs. BS4).

The _utilities.scss file now only creates a variable $utilities holding all the ... utilities. Another file utilities\_api.scss, when compiled, generates the utility CSS.

For your case use:

@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/utilities/api";

Make sure to read the docs on how the API works.

Solution 2:[2]

Do what they say in Bootstrap doc.

@import "../bootstrap/scss/functions";
@import "../bootstrap/scss/variables";
@import "../bootstrap/scss/utilities";


$utilities: map-merge(
   $utilities, (
       "border": map-merge(
          map-get($utilities, "border"), 
          ( responsive: true ), ),
        )
);

@import "../bootstrap/scss/bootstrap";

always place your utilities before the bootstrap imported. and import the three files where also bootstrap mentioned in API.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Shankar Balaji

Related Questions