@ угловые / материальные стили в одной таблице стилей

Question

Я хочу переместить все стили в одну таблицу стилей, без отдельных стилей компонентов.Я могу контролировать свои стили, однако, когда я включаю компоненты @ angular / material, они добавляются как отдельные теги стилей:

У меня есть отдельные стилиФайл .scss, который уже включает в себя конструкции материалов в соответствии с document .

// Include the default theme styles.
@include angular-material-theme($candy-app-theme);

Как я могу также добавить все компоненты в одну таблицу стилей?

Редактировать: вот как добавляются модули @angular/material:

import { NgModule } from '@angular/core';
import {
  MatButtonModule,
  MatGridListModule,
  MatIconModule,
  MatListModule,
  MatSidenavModule,
  MatToolbarModule,
} from '@angular/material';

@NgModule({
  exports: [
    MatButtonModule,
    MatGridListModule,
    MatIconModule,
    MatListModule,
    MatSidenavModule,
    MatToolbarModule,
  ]
})
export class MaterialModule { }

Answer 1

Вызов в angular-material-theme() mixin будет включать темы только для компонентов плюс основные (глобальные) стили.Стиль компонента Angular Material, который не является частью темы, инкапсулируется и встроен в компонент и динамически добавляется в DOM.Невозможно автоматически включить эти стили в одну таблицу стилей.Даже если бы вы могли это сделать, возможно, что все могло бы работать неправильно, плюс вам также нужно было бы отключить теги стилей, вставленные в DOM компонентами, что невозможно.Кроме того, поскольку сами компоненты уже содержат код стиля, вы бы добавили на страницу большой размер, дублируя стиль в глобальной таблице стилей.Другими словами, вы не можете сделать это, и это не должно быть сделано.