Question

在我的Angular2项目中，我从https://material.angular.io/guide/getting-started安装了最新的材质插件。接下来，我将@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';添加到我的组件的css文件中。但是在我的控制台中Angular显示了这个错误：

material.es5.js：148无法找到Angular Material核心主题。大多数材料组件可能无法按预期工作。有关更多信息，请参阅主题指南：https://material.angular.io/guide/theming`

材料成分不起作用。怎么了？

Answer 1

请将以下代码插入位于 src 文件夹中的 style.css 。

@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";

您可以在预建主题文件夹下选择任何css。

Answer 2

我使用了以下步骤：

1）将此（或其他）材质主题导入主css文件：

@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";

2）同时确保使用 app.component 文件注册此主css文件

@Component({
  selector: 'app',
  styleUrls: [
    './app.component.css'
  ]
})

3）仔细检查您需要的组件是否从 app.module 文件中 @ angular / material 导入

import { MdCardModule, MdInputModule } from '@angular/material';

Answer 3

put that code into your angular-cli.json file

"styles": [
    "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"
  ],

it's works fine for me

Answer 4

如果在使用Karma进行测试期间发生这种情况，请将以下pattern添加到files文件中的karma.config.js列表中。

module.exports = function (config) {
   config.set({
    basePath: '',
    ...,
    files: [
        {pattern: './node_modules/@angular/material/prebuilt-themes/indigo-pink.css', included: true, watched: true}
    ],
    ...
}

有关详细信息，请参阅此处：https://www.bountysource.com/issues/44073085-a-testing-with-material-components-guide-to-demonstrate-including-core-theme-in-test-suite

Answer 5

如果您使用的是Angular-CLI，则需要引用主题文件，例如： .angular-cli.json文件中的“candy.scss”。仔细看，你有* .scss吗？这是一个Sass文件。在此处查看信息：Angular Material 2 Theming instructions。因此，在.angular-cli.json中，在styles属性下，在“themes / styles.css”旁边添加“themes / candy.scss”。我的项目中有一个名为“themes”的文件夹。我把styles.css和candy.scss放在themes文件夹中。现在，Angular-CLI可以找到您的主题。

Answer 6

添加：

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

到style.css

Answer 7

除了上面提到的@import语句。请确保添加封装：@Eonent装饰器内的ViewEncapsulation.None。

@Component({
selector: 'app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
encapsulation: ViewEncapsulation.None})

如果您正在为.Net core 1.1或2.0 Angular SPA visual studio模板寻找Angular Material设置。请找到详细记录的设置说明详细信息here。

Answer 8

将以下行添加到您的src/styles.css

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

您也可以尝试其他Css类。以下是可用的类：

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

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

@import '~@angular/material/prebuilt-themes/pink-bluegrey.css';

@import '~@angular/material/prebuilt-themes/purple-green.css';

Answer 9

为我添加了index.html的css部分

 <link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

如此处here

所述

Answer 10

检查css或scss文件中的任何其他@import。我遇到了这个问题，在删除其他导入文件之前无法解决。

Answer 11

如果只需要材质图标，并且不想导入整个材质css，请在根css中使用它：

document.write

Answer 12

添加 @import“ ~@angular/material/prebuilt-themes/indigo-pink.css” ；到您的角度项目的style.css中。

如果您想要任何其他主题，请按照以下步骤操作： 节点模块-> @angular->材质->预设主题->

i）深紫色琥珀色： @import“ ~@angular/material/prebuilt-themes/deeppurple-amber.css

ii）靛蓝粉红色： @import“ ~@angular/material/prebuilt-themes/indigo-pink.css

iii）粉红色-蓝灰色： @import“ ~@angular/material/prebuilt-themes/pink-bluegrey.css

iv）紫色绿色： @import“ ~@angular/material/prebuilt-themes/purple-green.css

如果您想阅读，可以访问：Theming your Angular Material app

Answer 13

我遇到了与您相同的错误，并且在其中一项评论中找到了解决方案。由于该解决方案对我有用，因此我想将其发布为答案。

如果您的项目已经在运行，并且随后安装了材料组件，则需要首先重新启动项目。仅此一项就可以解决。

Answer 14

添加

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

到 style.css 文件，或添加

<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

在 index.html 文件的头部

Answer 15

我不知道有多少人会觉得这很有用，但是尝试了Stack Stack的不同解决方案后，重新启动ng服务器的工作就起作用了。

Answer 16

Material design modules包含scss，将css文件迁移到scss分两步：

npm i diagrams-scss-migrate
ng g diagrams-scss-migrate:scss-migrate

希望这对每个人都有效:)

角度材料无法找到Angular Material核心主题

16 个答案: