Bootstrap 5: Can not use utilities

user_7306020 0
Viewed 3507

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.

bootstrap-5 twitter-bootstrap sass css
3 Answers

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.

Admin1

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.

user_166483380

In the last update you should use like this:

// Here is some overrided bootstrap variables.

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/maps";
@import "~bootstrap/scss/utilities";

// You can edit utilities here. Explained here https://getbootstrap.com/docs/5.0/utilities/api/#using-the-api

@import "~bootstrap/scss/utilities/api";

Also you can see tru order in the main bootstrap.scss file.

user_106333950
Related