Angular material找不到Angular material核心主题

在我的Angular2项目中，我安装了最新的材质插件。接下来我添加

@import'~@angular/material/prebuild themes/deeppurple amber.css'到我的组件的css文件。但在我的控制台中，Angular显示了以下错误：

material.es5.js:148找不到角度材质核心主题。大多数材料组件可能无法按预期工作。有关更多信息，请参阅主题化指南：`

材料组件不工作。
怎么了
 请在src文件夹中的style.css中插入以下代码

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

您可以在预构建主题文件夹下选择任何css。
我让它能够执行以下步骤：

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

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

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

2） 还要确保将此主css文件注册到app.component文件中

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

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

3） 仔细检查您需要的组件是否从应用程序模块中的@angular/material导入

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

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

如果在使用Karma进行测试期间发生这种情况，请将以下
模式添加到
文件
列表中
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}
    ],
    ...
}

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

@import“~@angular/material/prebuilded themes/indigo pink.css”

到您的
style.css
除了上述@import语句之外。请确保添加
封装：视图封装。在@Component decorator中没有

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

如果您正在寻找.Net core 1.1或2.0 Angular SPA visual studio模板的角度材质设置。请查找详细的安装说明文档。
为我添加index.html的css部分提供了帮助

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



如本文所述，将该代码放入angular-cli.json文件

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

这对我来说很好
检查css或scss文件中的任何其他@import。我遇到了此问题，在删除其他导入之前无法解决此问题。
如果您只需要材质图标，而不想导入整个材质css，请在根css中使用此选项：

/** disable angular mat theme warning */
.mat-theme-loaded-marker {
  display: none;
}

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

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

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

@import'~@angular/material/prebuild themes/indigo pink.css'

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

@import'~@angular/material/prebuild themes/pink bluegrey.css'

@import'~@angular/material/prebuild themes/purple-green.css'
添加@import“~@angular/material/prebuild themes/indigo pink.css”；以创建角度项目的style.css

如果您需要任何其他主题，只需遵循以下步骤：
节点模块->@角度->材质->预构建主题->

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

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

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

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

如果你想阅读，你可以访问：
我和你有相同的错误，我在其中一条评论中找到了解决方案。既然这个解决方案对我有效，我想把它作为一个答案发布

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

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

到style.css文件，
或添加



在index.html文件的开头部分，我不知道有多少人会觉得这很有用，但在尝试了堆栈溢出的不同解决方案后，重新启动ng服务器起了作用。
如果我没记错的话，这个文件是SASS文件（.scss），也许你可以尝试一下？我没有任何SASS文件否，你没有SASS文件，但角材料模块确实如此。这就是您使用自己的主题的方式（如果我没记错的话，请再次使用），因此请尝试在节点模块中查看它是SASS还是css文件。如果您正在处理自定义主题项目，并且在“angular.json”文件中添加了一个文件，请确保停止ng服务并重新启动新的“theme.scss”加载。正如@jelbourn在问题中提到的：在全局（styles.css）中加载预构建的主题，而不是在组件的styleurl中加载。使用~可以更轻松地访问节点模块。示例：@import'~@angular/material/prebuild themes/deeppurple amber.css'；正如@BraveNinja所说，tilde“~”允许您避免路径问题。请参阅以获得更好的解释。为什么这不是由angular处理的添加@angular/material本身？@Trevor链接已断开，该段落不再存在它节省了我的时间。谢谢。不工作，因为node_modules\@angular\material_theming.scss正在覆盖这是真正正确的答案。切勿使用style.css导入其他css。始终使用angular.json文件。@Bluex为什么这样更好？@Rocco，因为它类似于样式css内联。。它是有效的，但不是一个好的解决方案，而是最糟糕的。这是最好的答案。如果在运行
ng add@angular/material
后，在更高版本9+中出现此错误，只需终止ba即可
@Component({
  selector: 'app',
  styleUrls: [
    './app.component.css'
  ]
})

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