在 Next.js 中使用 SCSS 模块和 Bootstrap 时出现“SassError：找不到目标选择器”答案

【问题标题】："SassError: The target selector was not found" when using SCSS Modules and Bootstrap in Next.js在 Next.js 中使用 SCSS 模块和 Bootstrap 时出现“SassError：找不到目标选择器”
【发布时间】：2022-04-18 17:15:47
【问题描述】：

我正在使用带有 SCSS 模块的 Next.js。我安装了boostrap 和npm install bootstrap。然后我在/public/scss/ 中创建了一个名为common.scss 的文件。我在这个文件中有以下内容：

@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 '../../public/scss/common.scss';
.footer {
  @extend .container-fluid;
}

我收到以下错误：

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

还有什么我需要做的还是我做错了？

【问题讨论】：

您解决了这个问题吗？ @davidaap
很遗憾，我发现的唯一解决方案是直接在 JSX 上应用引导类，并使用 classname npm 包将它们与我的自定义 SCSS 结合起来。

标签： css sass next.js bootstrap-5

【解决方案1】：

我的项目中也遇到了这个问题。我已经解决了：

我@import vite.config by css.preprocessorOptions 中的scss 文件，我发现当我在单个.vue 文件中重新@import 时，会发生错误。原因是 .scss 文件的导入重复。

希望它对你有用。

【讨论】：