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

Question

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

./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):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import 'my-custom-package-layout/src/lib/styles/styles.scss';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\styles\ag-grid.scss 1:9  root stylesheet

./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):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import 'my-custom-package-layout/src/lib/styles/mixins.scss';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\styles\products.scss 1:9  root stylesheet

./src/styles/ag-grid.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷

这只是非常长的错误消息的第一行，该消息指出 'my-custom-package-layout/src/lib/styles/styles.scss' 在许多文件中都找不到。
但是，如果我使用 visual studio 代码导航到那里，我不会收到错误消息，并且参考似乎没问题。

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

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

如果我运行 'npm rebuild node-sass'，我很快就会得到回复：

rebuilt dependencies successfully

没有变化...

Answer 1

这是因为有一个缓存版本的节点-sass.You可以试试这个。

从全局 npm-cache 中删除节点-sass（对于 Windows 用户 %userprofile%\AppData\Roaming\npm-cache).
从项目的 node_modules 目录中删除节点-sass。
执行 npm install 以重新安装 node-sass。

Answer 2

我不得不在路径前面放一个 ~ 符号。解决了它：

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

Answer 3

我尝试在库名称前添加 ~，在 angular.json 中，我尝试将库添加到 stylePreprocessorOptions.includePaths，但它对我不起作用。

我在库名前添加了node_modules，它解决了我的问题。 @import 'node_modules/@myscope/mylib/src/assets/input.base.scss';

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

After upgrading npm package of Angular app, sass-loader does not work anymore

sass

npm

sass-loader

angular

angular13