Устранение неисправностей Стили материала не загружаются на матовую кнопку Angular 7?

Question

Я создал приложение с ng new и добавил Материал с 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 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

Для меня я создал кнопки без стилей.Я на самом деле скопировал пример из документации по меню .Я не осознавал, что кнопки в примере нуждаются не только в том, что задокументировано на вкладке 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, похоже,NOP с Angular 7, если у вас есть

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

Если он также настроен в вашем angular.json.Теперь все работает без оператора @import.

• Здесь открыта ошибка Doc

Answer 2

Пожалуйста, удалите импорт css из angular.json и поместите его в свой файл 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">

Дайте мне знать, если это работает, или вам нужно что-нибудь еще.