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 不會出現任何錯誤，以及更改導入是否是最好的解決方法。