CODEWITHSUNDEEP
csstwitter-bootstrapsassmodule
Nicky991
Nicky991

Reputation: 31

Can't import Bootstrap 5 variables into SASS module while importing from Bootstrap 4 works fine

We have a React project with SASS modules. I have to upgrade Bootstrap in the project from version 4 to version 5. There are some files (*.module.scss) with following CSS classes:

.active {
        @extend .mt-1;
    }

To extend the mt-1 class Bootstrap class and other classes Bootstrap is imported like this:

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

This works with Bootstrap 4 but do not work with Bootstrap 5. The error says SassError: The target selector was not found. Use "@extend .mt-1 !optional" to avoid this error.. I tried with other CSS classes like .fw-bold and always get the same error. What's wrong? How to import variables in Bootstrap 5? I cannot import entire Bootstrap @import "~bootstrap/scss/bootstrap"; because I will get error Selector ":root" is not pure - :root selector cannot be used in SASS module.

Upvotes: 1

Views: 2749

Answers (1)

Nicky991
Nicky991

Reputation: 31

Problem solved! For Bootstrap 5 I had to import also @import "~bootstrap/scss/utilities/api";. This is how to import Bootstrap 5 to a SASS module (*.module.scss):

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/utilities";
@import "~bootstrap/scss/utilities/api";

Now I am able to extend @extend .shadow-sm; and other classes.

Upvotes: 2

Related Questions