SassError：找不到目标选择器

Question

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

\n

[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]\n\nERROR 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)\nModule build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: The target selector was not found.\nUse "@extend h1 !optional" to avoid this error.\n  \xe2\x95\xb7\n5 \xe2\x94\x82   @extend h1;\n  \xe2\x94\x82   ^^^^^^^^^^\n  \xe2\x95\xb5\n  node_modules/bootstrap/scss/_type.scss 5:3  root stylesheet\n

\n

我没有找到任何代码片段@extend h1，我不知道应该做什么来解决这个问题。有人面临同样的问题吗？我尝试像这样导入 api：

\n

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

\n

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

\n

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

\n

还是没有解决这个问题。

\n

Answer 1

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

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

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