Currently, I am working with Next.js and utilizing SCSS Modules. To incorporate Bootstrap into my project, I opted to install it using the command npm install bootstrap. Following this installation, I went ahead and created a new file titled common.scss within the directory /public/scss/. The contents of this file are as follows:
@import '../../node_modules/bootstrap/scss/functions';
@import '../../node_modules/bootstrap/scss/variables';
@import '../../node_modules/bootstrap/scss/mixins';
@import '../../node_modules/bootstrap/scss/grid';
My intention was to create a new CSS class like so:
@import '../../public/scss/common.scss';
.footer {
@extend .container-fluid;
}
However, upon attempting this, an error message is displayed:
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
I'm left wondering if there's a step I missed or if I've incorrectly implemented something. Any insights on what might be causing this issue are greatly appreciated.