css - 正确导入后， Material 样式未应用于 Angular 应用程序

Question

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

我正在尝试使用 Angular Material ，我已经正确设置了我的应用程序，如 begginer's guide 中所示.

我检查了我的应用程序，样式表已正确导入(包括在内)。但是，未应用样式。

我的网络选项卡的屏幕截图:

应用程序选项卡还显示已应用样式表:

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

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

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

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

然后在我的 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>

样式没有被应用。

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

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

Answer 1

我遇到了同样的问题。我解决了将样式放入 angular-cli.json 文件中的问题:

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