单个样式表中的 @angular/material 样式

Question

我想将所有样式移动到一个样式表中，而不是单独的组件样式。我可以控制我的样式，但是当我包含 @angular/material 组件时，它们会被添加为单独的样式标签：

我有一个styles.scss 文件，其中已经包含根据docu 的材料设计。

// 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 中的样式标签，这是不可能的。此外，由于组件本身已经包含样式代码，因此您将通过在全局样式表中复制样式来增加页面的大小。换句话说，你做不到也不应该做。