angular - 尝试在我的自定义主题中导入 Angular Material 主题文件，但未找到该文件

Question

我尝试在我的自定义主题中导入 Angular Material 主题文件，当我尝试生成 css 代码时出现错误:

$ sass src/_custom-theme.scss
Error: Can't find stylesheet to import.
  ╷
2 │ @import '~@angular/material/_theming.scss';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵

这是我的文件的第一行。我也尝试了以下行，但出现相同的错误:

@import '~@angular/material/theming';

如果我尝试像这样导入文件，它会起作用:

@import '../node_modules/@angular/material/theming';

但奇怪的是，通过导入这样的预构建主题，只是为了测试，它可以工作

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css'

WebStorm 设法生成 css 并在使用 ng serve 启动 web 应用程序时使用它。但仍然显示错误消息。
用webstorm和sass显示错误信息

版本:

Angular :7.2.12

Material :7.3.7

Sass:1.17.4 用 dart2js 2.2.0 编译

你有解决这个问题的想法吗？非常感谢。

Answer 1

如果您使用的是 Angular 9 并使用 ng add @angular/material 添加了 @angular/material 包可能会出现这个问题。这是因为 ng add command 使用用于旧版本 Angular 的包，并且截至今天尚未与 v9 兼容。这可以通过安装来解决 npm install @angular/material命令代替。您可能需要先卸载该软件包。如果仍然不起作用，请删除 node_modules 文件夹和 package-lock.json 并运行 npm install .

由于这是一篇旧帖子，我将假设这发生在 Angular v8 版本附近，这可能会导致相同的行为，直到 ngrx 通过 npm add 更新以支持 v8命令。同样的解决方案也应该解决 future 版本的 Angular 版本更新的问题。