Question

我使用ng new创建了一个应用，并使用ng add @angular/material添加了Material。当我运行ng serve时，尽管angular.json

中没有显示物料style.css

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

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

content_scripts.css
frontend.css
shadow.css

一个css代表字体（fonts?family..），另一个css代表图标icon?family..

我还尝试将以下内容添加到styles.scss中，

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

这也导致没有引入其他CSS文件。

Answer 1

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

所以看起来像这样。

angular.json

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

styles.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">

让我知道它是否起作用，或者您还需要其他什么东西。

Answer 2

对我来说，我创建的按钮没有样式。我实际上是从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检查。

对于@import中的styles.scss，如果您有Angular 7，则似乎是NOP

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

如果您还在angular.json中对其进行了配置。现在一切正常，没有@import语句。

Doc bug opened here

Answer 3

如果文件 $ which ruby $ which bundle 设置正确，请检查您的组件属性 angular.json 设置是否正确，即

color

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

3 个答案: