React-Scripts: Why can't I import a .scss file by referencing node_modules folder

Question

I have a project created by 'create-create-app' cli, and I've recently updated from Node 12 to 16 and react-scripts 2 to 5. Since then, I've been getting this error.

ERROR in ./src/assets/main.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[0].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[7].use[4]!./src/assets/main.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
9 │ @import "node_modules/bootstrap/scss/functions";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules/shards-ui/src/scss/shards.scss 9:9  @import
  src/styles/shards-dashboards.scss 15:9           @import
  src/assets/main.scss 4:9                         root stylesheet

The shards-ui is a dependency of my package.json. The .shards.scss file of shards-ui dependency is importing a file from its local node_modules.

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

Also, installing using yarn 1.22.19 doesn't give me this error. But npm 8.11.0 does.

To remove the error, I changed
@import "node_modules/bootstrap/scss/functions";
to
@import "~bootstrap/scss/functions";

I would like to understand why yarn doesn't present any error, and if changing the import is the best fix for it.