SassError: The target selector was not found

Question

After upgrade to bootstrap 5.x, the node version is v16.13.2, the webpack version is "webpack": "^4.36.0", the sass-loader version "sass-loader": "^9.0.0". when compile project, shows error like this:

[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

I did not found any code snippet with @extend h1, and I have no idea what should I do to fixed this problem. anyone facing the same problem? I have tried to import api like this:

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

still did not fix this problem. I tried to upgrade webpack,sass,sassploder to the latest version:

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

still did not fix this problem.

Answer 1

I had a similar problem and was able to fix it with the @use statement instead of @import:

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

I referenced a CSS file and also had to specify the file name not only a folder.