角质材料找不到角质材料的核心主题

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

Es5.js: 148找不到棱角材质核心主题。大多数材料组件可能无法按预期工作。更多信息请参考主题指南: https://material.angular.io/guide/theming’

材料部件不工作。 怎么了？

119897 次浏览
小开
最佳答案

请在 src文件夹中的 Stylescss中插入以下代码。

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

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

小开

我通过以下步骤让它工作:

1)导入这个(或其他)材质主题到你的主 css 文件:

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

2)还要确保将这个主 css 文件注册到 应用程序组件文件中

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

3)仔细检查所需的组件是否从 应用程序模块文件中的 @ 棱角/材料导入

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

If this is happening during testing with Karma, add the following pattern to the files list in your karma.config.js file.

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

小开

如果使用 Angular-CLI，则需要引用主题文件，例如。角斜肌。Json 文件。仔细看，你有没有 * 。SCSS？这是 Sass 的文件。在这里查找信息: 角度材料2主题说明。所以，在。角斜肌。Json，在 style 属性下面，添加“ themies/candy.scss”，在“ themies/styles.css”旁边。我有一个文件夹在我的项目称为“主题”。我将 styles.css 和 candy.scss 放在主题文件夹中。现在，Angular-CLI 可以找到你的主题。

小开

地址:

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

到您的 < code > style.css

小开

除了上面提到的@import 语句外，请确保添加 视图封装。@Component 装饰器中没有。

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

如果你正在寻找角材料设置为。Net core 1.1或2.0 Angular SPA 可视化工作室模板。请找到良好的文件设置指示详细 给你。

小开

worked for me adding in css section of index.html 

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

正如这里提到的 给你

小开

将这段代码放入您的 angle-cli. json 文件中

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

it's works fine for me

小开

Check any other @imports in your css or scss file. I experienced this issue and could not resolve it until other imports had been removed.

小开

如果你只需要材质图标，而不想导入整个材质 css 使用这个，在你的根 css:

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

将以下行添加到 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';

小开

将 @import "~@angular/material/prebuilt-themes/indigo-pink.css"; 添加到角度项目的 style.css。

如果你想要其他主题，只要按照下面的步骤: 节点模块->@顺角-> 材料-> 预构建主题->

i)深紫琥珀色 : @ import”~@angle/Materials/prebuild-theme/deepurple-amber. css

Ii) 靛粉色: @import "~@angular/material/prebuilt-themes/indigo-pink.css

Iii) 粉蓝灰色: @import "~@angular/material/prebuilt-themes/pink-bluegrey.css

Iv) 紫绿色: @ import”~@angle/Materials/prebuild-theme/Violet-green. css

And if you want to read you can visit :Theming your Angular Material app

小开

我和您犯了同样的错误，并且在其中一条评论中找到了解决方案。既然这个解决方案对我有效，我想把它作为一个答案发布出去。

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

小开

加

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

到 Style.css文件, OR add

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

在 Html文件的头部

小开

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

小开

材料设计模块包含 css，通过以下两个步骤将 css 文件迁移到 scss 中:

  1. npm i schematics-scss-migrate
  2. Ng g 示意图

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


提交答案