尝试在我的自定义主题中导入 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 启动 webapp 时使用它，但仍然显示错误消息。错误消息显示为 webstorm 和 sass

版本：

Angular: 7.2.12
Material: 7.3.7
Sass: 1.17.4 使用 dart2js 2.2.0 编译

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

Answer 1

根据您的应用程序结构，您可以调整路径以找到 node_modules。

如果你有 _variable.scss 在 index.html 的同一个地方做

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

Answer 2

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

因为这是一个旧的 post，我假设这发生在 Angular v8 版本附近，这可能会导致相同的行为，直到 ngrx 更新为支持 v8 通过npm add 命令。同样的解决方案也应该解决 Angular 版本更新的未来版本的问题。

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

Trying to import angular material theming file in my custom theme but the file is not found

angular

sass

angular-material2