'"SassError: The target selector was not found" when using SCSS Modules and Bootstrap in Next.js

I am using Next.js with SCSS Modules. I installed boostrap with npm install bootstrap. I then created a file called common.scss inside /public/scss/. I have the following contents in this file:

@import '../../node_modules/bootstrap/scss/functions';
@import '../../node_modules/bootstrap/scss/variables';
@import '../../node_modules/bootstrap/scss/mixins';
@import '../../node_modules/bootstrap/scss/grid';

When I try to create a class like this:

@import '../../public/scss/common.scss';
.footer {
  @extend .container-fluid;
}

I get the following error:

error - ./node_modules/next/dist/compiled/css-loader/cjs.js??ruleSet[1].rules[3].oneOf[3].use[1]!./node_modules/next/dist/compiled/postcss-loader/cjs.js??ruleSet[1].rules[3].oneOf[3].use[2]!./node_modules/next/dist/compiled/resolve-url-loader/index.js??ruleSet[1].rules[3].oneOf[3].use[3]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[3].oneOf[3].use[4]!./styles/components/Footer.module.scss
SassError: The target selector was not found.
Use "@extend .container-fluid !optional" to avoid this error.
  ╷
4 │   @extend .container-fluid;
  │   ^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  styles/components/Footer.module.scss 4:3  root stylesheet

Is there something else I need to do or am I doing this wrong?

csssassnext.jsbootstrap-5


Solution 1:[1]

I also got this problem in my project. And I has solved by:

I @import the scss file in vite.config by css.preprocessorOptions, I found that when I re-@import in single .vue file, the error happens. for the reason is, the duplication of imports of the .scss file.

Hope it works for you.

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 Tyler2P

Related Questions