单个样式表中的@ 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()混合的调用将仅包括组件主题以及核心（全局）样式。不属于主题的Angular Material组件样式被封装并内置到组件中，并动态添加到DOM中。无法自动将这些样式包含在单个样式表中。即使您可以这样做，也可能一切都无法正常运行，此外，您还需要关闭组件插入DOM的样式标签，这是不可能的。此外，由于组件本身已经包含样式代码，因此您将在全局样式表中复制样式，从而在页面上增加很多大小。换句话说，您不能做到，也不应该做到。