升级 Angular 应用程序的 npm 包后，sass-loader 不再工作

Question

我刚刚从 Angular 12 升级到 Angular 13，还更新了一些其他 NPM 包。
\n其中一个包含我的 angular.json 文件中引用的 scss 文件。这从来都不是问题，但在尝试为我的应用程序提供服务后，我收到一条对我来说很难理解的错误消息：

\n

./src/styles/ag-grid.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles/ag-grid.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Can't find stylesheet to import.\n  \xe2\x95\xb7\n1 \xe2\x94\x82 @import 'my-custom-package-layout/src/lib/styles/styles.scss';\n  \xe2\x94\x82         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n  \xe2\x95\xb5\n  src\\styles\\ag-grid.scss 1:9  root stylesheet\n\n./src/styles/products.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles/products.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Can't find stylesheet to import.\n  \xe2\x95\xb7\n1 \xe2\x94\x82 @import 'my-custom-package-layout/src/lib/styles/mixins.scss';\n  \xe2\x94\x82         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n  \xe2\x95\xb5\n  src\\styles\\products.scss 1:9  root stylesheet\n\n./src/styles/ag-grid.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):\nHookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Can't find stylesheet to import.\n  \xe2\x95\xb7\n

\n

这只是很长的错误消息的第一行，该消息指出在许多文件中找不到“my-custom-package-layout/src/lib/styles/styles.scss”。
\n但是，如果我使用 Visual Studio 代码导航到那里，我不会收到错误，并且参考似乎很好。

\n

这让我觉得 sass-loader 一般不再工作了。（第一行很长。看那里 - 它真的看起来像这样！）
\nsass-loader 在 Angular 中是如何实现的？我无法重新安装 sass，因为它甚至没有在我的 package.json 中引用。
\n它是 Angular.cli 的一部分吗？

\n

我可以尝试什么来更接近解决方案？

\n

如果我运行“npmrebuildnode-sass”，我很快就会得到回复：

\n

rebuilt dependencies successfully\n

\n

不用找了...

\n

Answer 1

我必须在路径前面放一个〜符号。这解决了它：

@import '~my-custom-package-layout/src/lib/styles/mixins.scss';