角度材料 - 无法解析'@ angular/material/theming'

Question

我遵循了官方指南并创建了app-theme.scss以下内容:

@import '~@angular/material/theming';    
@include mat-core();    
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);    
$candy-app-warn:    mat-palette($mat-red);    
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);    
@include angular-material-theme($candy-app-theme);

内容styles.css:

@import './app-theme.scss';

但是,我在编译期间总是遇到以下错误:Module not found: Error: Can't resolve '@angular/material/theming'.我该怎么做才能让它发挥作用？

Answer 1

解决了:

Angular Material 2文档假定您默认使用sass样式表.这从未明确传达或解释过.下面列出的步骤可用于解决此问题.

1. 重命名styles.css到styles.scss并设置其内容@import './app-theme';
2. 在angular-cli.json,styles: ["styles.css"]改为styles: ["styles.scss"]
3. 重启npm

Answer 2

Angular 6或7-一次获得全部命令

在中Angular 6 or 7，您只需要安装angular-material类似

ng add @angular/material

该命令的作用是什么？好在这里

1. 安装angular material，cdk，animations
2. 将引用添加到 app.module.ts
3. 添加material-icons'对index.html
4. 它要求您选择所需的主题并添加对package.json（如果主题不起作用，请styles.css/styles.scss按照以下说明将其导入）的引用

但是在以前的版本中，您是手动执行这些步骤

角度5

使用Angular5+，一种或两种import方法都可以为您服务

@import "@angular/material/prebuilt-themes/indigo-pink.css";

@import "~@angular/material/prebuilt-themes/indigo-pink.css"; // in official docs

Answer 3

尝试这个，

1. 将您的主题文件名更改为 _app-theme.scss

2. 将你的styles.css 更改为 styles.scss

3. 将您的主题导入到 style.scss 文件中，例如：

@import './path/to/your/theme/app-theme'; // 这里不需要下划线和文件扩展名

4. 您不需要在 angular-cli.json 样式中包含您的主题文件：[]