故障排除无法在垫式按钮Angular 7上加载材质样式吗？

Question

我使用创建了一个应用，ng new并使用添加了Material ng add @angular/material。当我运行时，ng serve尽管有我的参与，但我看不到加载了style.css材料angular.json

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

我还想念什么？当我查看chrome开发者控制台时，看到它正在加载

• content_scripts.css
• frontend.css
• shadow.css

字体（fonts?family..）的一个css 和图标的一个的cssicon?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>元素无效的原因，我在尝试时遇到以下错误：

拒绝从' http：// localhost：4200/node_modules/@angular/material/prebuilt-themes/indigo-pink.css ' 应用样式，因为其MIME类型（'text / html'）不是受支持的样式表MIME类型，并且启用了严格的MIME检查。

至于@importin styles.scss，如果您有Angular 7，这似乎是一个NOP

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

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

• Doc Bug在这里打开

Answer 2

请从 angular.json 中删除 css 导入并将其放入您的 styles.scss 文件中。

所以它看起来像这样。

angular.json

"architect": { "build": { ... "styles": [ "src/styles.scss" ], ... },

样式.scss

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

如果你有上面的问题，请将以下几行添加到styles.scss

@import '~@angular/material/theming'; // Plus imports for other components in your app. // Include the common styles for Angular Material. We include this here so that you only // have to load a single css file for Angular Material in your app. // Be sure that you only ever include this mixin once! @include mat-core(); // Define the palettes for your theme using the Material Design palettes available in palette.scss // (imported above). For each palette, you can optionally specify a default, lighter, and darker // hue. Available color palettes: https://material.io/design/color/ $candy-app-primary: mat-palette($mat-indigo); $candy-app-accent: mat-palette($mat-pink, A200, A100, A400); // The warn palette is optional (defaults to red). $candy-app-warn: mat-palette($mat-red); // Create the theme object (a Sass map containing all of the palettes). $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn); // Include theme styles for core and each component used in your app. // Alternatively, you can import and @include the theme mixins for each component // that you are using. @include angular-material-theme($candy-app-theme);

我只是从文档中粘贴它。

您也可以通过以下代码将此添加到 index.html

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

让我知道它是否有效或您需要其他任何东西。