React-Scripts：为什么我不能通过引用 node_modules 文件夹来导入 .scss 文件

Question

我有一个由'create-create-app' cli 创建的项目，我最近从节点 12 更新到 16 和 react-scripts 2 到 5。从那时起，我一直收到此错误。

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

shards-ui 是我的 package.json 的依赖项。 shards-ui 依赖的.shards.scss文件正在从其本地 node_modules 导入文件。

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

此外，使用yarn 1.22.19安装不会给我这个错误。 但是npm 8.11.0可以。

为了消除错误，我改变了
@import "node_modules/bootstrap/scss/functions";
至
@import "~bootstrap/scss/functions";

我想了解为什么 yarn 不会出现任何错误，以及更改导入是否是最好的解决方法。