正确导入后，材质样式未应用于角度应用程序答案

【问题标题】：Material Styles are not being applied in angular app after being correctly imported正确导入后，材质样式未应用于角度应用程序
【发布时间】：2018-08-06 00:42:42
【问题描述】：

我的问题是我的样式表已正确包含在网页中，但样式未得到应用。问题如下：

我正在尝试使用 Angular 材料，我已正确设置我的应用程序，如 begginer's guide 所示。

我检查了我的应用程序，样式表已正确导入（包括在内）。但是，没有应用样式。

我的网络标签的屏幕截图：

应用程序选项卡还告诉您样式表已被应用：

我尝试通过三种方式包含主题设计：

1) 在styles.css 中使用@import "~@angular/material/prebuilt-themes/indigo-pink.css";

2) 在 index.html 中使用链接元素，例如：<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">（没有成功）

3) 所以我创建了一个资产文件夹并将我的所有文件都放在那里，例如：

然后在我的 angular-cli.json 文件中，我将 gulp 配置为：

"assets": [
    { "glob": "**/*", "input": "./assets/Images/", "output": "./assets/Images/" },
    { "glob": "**/*", "input": "./assets/StyleSheets/", "output": "./assets/StyleSheets/" },
    { "glob": "**/*", "input": "./assets/Javascript/", "output": "./assets/Javascript/" },
    { "glob": "**/*", "input": "./assets/Json/", "output": "./assets/Json/" },
    "favicon.ico"
  ]

然后我包含了我的样式表，例如：<link rel="stylesheet" type="text/css" href="assets/StyleSheets/deeppurple-amber.css">，它起作用了。

但是，当我尝试使用以下样式时： <button md-raised-button color="primary">Click me!</button>

样式没有被应用。

请帮我找出我做错了什么。

如果您需要存储库链接来重现问题，请告诉我。

【问题讨论】：

标签： css angular angular-material

【解决方案1】：

Angular 材质中有一个错误，我可以通过在导入中删除“~”来修复它 @import "~@angular/material/prebuilt-themes/indigo-pink.css"; 到 @import "@angular/material/prebuilt-themes/indigo-pink.css";

【讨论】：

我尝试了您指定的内容，但应用程序在编译过程中出现故障，我还需要配置其他什么吗？我正在使用角度 5。

【解决方案2】：

我遇到了同样的问题。我解决了它把样式放在 angular-cli.json 文件中：

"styles": [
    "styles.scss",
    "../node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
],

【讨论】：