Search code examples
reactjssassnext.jsbootstrap-5css-modules

How to import Bootstrap variables into SASS module?

is there a way to use Bootstrap SASS variables in SASS module?

For example I have file index.module.scss inside my react/NextJS project. How can I use in that sass module variable from bootstrap? Something like this:

.hero{
    color: $blue-200;
}

If i just add this import at start of file:

@import '~bootstrap/scss/bootstrap.scss';

I got this error (from NextJS): enter image description here

Let me notice, that when I use this import in non-module sass file (lets say in file index.scss), then it works. But I need (want) to use SASS modules...

Any idea how to solve it?
Thanks!

Solution

  • Oh, I find a solution. I can add this three imports (instead that one bootstrap imports):

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

    These three imports together works and doesn't cause error...