SassError：未找到目标选择器答案

【问题标题】：SassError: The target selector was not foundSassError：未找到目标选择器
【发布时间】：2022-05-06 15:30:43
【问题描述】：

升级到bootstrap 5.x后，node版本为v16.13.2，webpack版本为"webpack": "^4.36.0"，sass-loader版本为"sass-loader": "^9.0.0"。编译项目时，显示如下错误：

[0] ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/public/bootstrap-lite.scss 302 bytes {0} [built] [failed] [1 error]

ERROR in ./src/public/bootstrap-lite.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/public/bootstrap-lite.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: The target selector was not found.
Use "@extend h1 !optional" to avoid this error.
  ╷
5 │   @extend h1;
  │   ^^^^^^^^^^
  ╵
  node_modules/bootstrap/scss/_type.scss 5:3  root stylesheet

我没有找到任何带有@extend h1 的代码sn-p，我不知道应该如何解决这个问题。有人面临同样的问题吗？我曾尝试像这样导入 api：

@import "../../node_modules/bootstrap/scss/utilities";
@import "../../node_modules/bootstrap/scss/utilities/api";

仍然没有解决这个问题。我尝试将 webpack、sass、sassploder 升级到最新版本：

"sass": "^1.49.0",
    "sass-loader": "^12.4.0",
    "webpack": "^5.67.0",

仍然没有解决这个问题。

【问题讨论】：

标签： webpack sass bootstrap-5

【解决方案1】：

添加此导入修复此问题：

@import "../../node_modules/bootstrap/scss/bootstrap";

【讨论】：

对此有何解释？这样合适吗？

【解决方案2】：

我遇到了类似的问题，并且能够使用 @use 语句而不是 @import 来解决它：

@use "../../node_modules/bootstrap/scss/bootstrap";

我引用了一个 CSS 文件，而且还必须指定文件名，而不仅仅是一个文件夹。

【讨论】：