升级 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 Code导航到那里，我不会得到错误，并且引用似乎很好。

这让我想到sass-loader通常不再起作用。 （第一行非常长。看看那里-它确实是这样！）Angular中如何实现sass-loader？ 我无法重新安装sass，因为在我的package.json中甚至没有引用它。 它是否成为Angular.cli的一部分？

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

如果我运行“npm rebuild node-sass”，我只会很快收到回复：

rebuilt dependencies successfully

无变化...

- David Mason

Answer 1

我必须在路径前面加上 ~ 符号。

这样解决了问题：

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

- David Mason

Answer 2

这是由于 node-sass 的缓存版本引起的。您可以尝试以下方法:

• 从全局 npm-cache 中移除 node-sass（对于 Windows 用户来说，路径为 %userprofile%\AppData\Roaming\npm-cache）。
• 从您的项目 node_modules 目录中删除 node-sass。
• 执行 npm install 以重新安装 node-sass。

- Sakthi Bala K.S

---

在我的情况下，“%userprofile%\AppData\Roaming\npm-cache”文件夹中没有node-sass文件夹。不幸的是，从node_modules重新安装也没有起作用。 :( - David Mason

Answer 3

我曾尝试在库名前添加~，并在angular.json中将库添加到stylePreprocessorOptions.includePaths，但对我没有起作用。

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

- Nadav Avisror

---

或者您可以将 "stylePreprocessorOptions": { "includePaths": [ "./node_modules" ] } 添加到 angular.json 中。 - Alexander