angular - 无法在 mat-button Angular 7 上加载 Material 样式的故障排除？

Question

我用 ng new 创建了一个应用程序并添加了 ng add @angular/material 的 Material .当我跑 ng serve尽管在我的 angular.json 中，我没有看到加载了 Material style.css

"architect": {
  "build": {                                                         
    "options": {
      "styles": [                                                    
        "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",                                                                     
        "src/styles.scss"                                            
      ],                                                             
  ...                           

我还缺少什么？当我查看 chrome dev 控制台时，我看到它正在加载

content_scripts.css

frontend.css

shadow.css

一个 css 用于字体( fonts?family.. )和一个用于图标 icon?family..
我也尝试添加到我的 styles.scss下列，

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

这也导致没有引入额外的 css 文件。

Answer 1

对我来说，我创建了没有样式的按钮。我实际上从 menu 上的文档中复制了示例.我没有意识到示例中的按钮需要的不仅仅是 API 选项卡中记录的按钮。他们以其他方式工作，

import {MatButtonModule} from '@angular/material/button';

因此，当我在应用程序的 module.ts 中运行该导入时并将其添加到我的 imports阵列它起作用了。至于为什么手动包含带有 <link> 的样式元素不起作用，当我尝试时出现以下错误:

Refused to apply style from 'http://localhost:4200/node_modules/@angular/material/prebuilt-themes/indigo-pink.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

至于@import在 styles.scss ，如果你有，它似乎是一个带有 Angular 7 的 NOP

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

如果您还在 angular.json 中配置了它.现在没有 @import 一切正常任何地方的声明。

Doc bug opened here