Angular Material - 无法解析“@angular/material/theming”

Question

我按照 official guide 创建了一个 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

根据您提供的官方指南，您不应将主题文件导入 styles.css 文件，而应将其放入 angular-[= 的样式数组中14=] 文件，它应该接近这个：

styles: [
  "app-theme.scss",
  "styles.css"
]

Answer 2

试试这个，

将您的主题文件名更改为_app-theme.scss
将您的styles.css更改为styles.scss
将您的主题导入 styles.scss 文件，例如：

@import './path/to/your/theme/app-theme'; // You dont need the underscore and file extention here

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

Answer 3

已解决：

Angular Material 2 文档假定您默认使用 sass 样式表。这从来没有被清楚地传达或解释过。下面列出的步骤可用于解决此问题。

将 styles.css 重命名为 styles.scss 并将其内容设置为 @import './app-theme';
在angular-cli.json中，将styles: ["styles.css"]更改为styles: ["styles.scss"]
重新启动 npm

Answer 4

Angular 6+ --- 一条命令全部搞定

在Angular 6+中，您只需像

一样安装angular-material

ng add @angular/material

这个命令有什么作用？好看到这里

安装 angular material、cdk、animations
添加对 app.module.ts
添加 material-icons' 对 index.html
它要求您 select 您选择的主题并添加对 angular.json 的引用（如果主题不起作用，请按如下所述将其导入 styles.css/styles.scss）

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

Angular 5

使用 Angular5+，一种或两种 import 方法都适合您

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

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

Answer 5

你确定你已经在这个项目中安装了 angular 材料吗？有时你可以只复制网页的内容，但没有 node_modules 文件夹，在这种情况下编译器找不到路径 'node_modules/@angular/material/theming'.

只要试试这个命令，你就会明白。

npm install --save @angular/material @angular/cdk

可能会有帮助。

Answer 6

检查这条路径 ./node_modules/@angular/material/prebuilt-themes/indigo-pink.css 中的错误当您安装任何其他模块或库时。在我的例子中，我安装了 Angular Syncfusion scheduler
在上面的路径中添加了一个新的导入语句，所以您只需将导入语句剪切粘贴到 style.css 中，因为它通常应该在那里
并且在执行此过程时，Angular material 文件夹或 Angular Syncfusion 文件夹也可能从 node_modules 中删除，因此请确保键入命令 npm install 以便 npm 可以安装 package.json
中提到的所有依赖项

Angular Material - 无法解析“@angular/material/theming”

Angular Material - Can't resolve '@angular/material/theming'

sass

angular-material2

angular

Angular 6+ --- 一条命令全部搞定

Angular 5