Angular Material - 排除组件样式

【问题标题】：Angular Material - exclude components stylesAngular Material - 排除组件样式
【发布时间】：2020-03-18 19:39:14
【问题描述】：

我在开发一个 Angular v8 应用程序，但在制作生产版本时遇到了问题。我注意到生成的 style.scc 为 1.5 MB！我使用 Material，但我没有使用它的所有组件。

所以问题 - 有没有办法只在生产 style.css 中包含所需的组件样式？比如说，.mat-icon {...}、.mat-form-field {...} 样式定义等等。

感谢您的提前！

【问题讨论】：

标签： angular angular-material angular-material-7

【解决方案1】：

指南on the Material website 表明您只能包含某些组件。您必须手动导入并包含基本主题 mixin 才能执行此操作，但它应该允许您减小 .scss 文件的大小：

@import '~@angular/material/theming';

// Base mixin
@include mat-core();

// Define the theme.
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
$candy-app-theme:   mat-light-theme($candy-app-primary, $candy-app-accent);

// Include the theme styles for only specified components.
@include mat-core-theme($candy-app-theme);
@include mat-button-theme($candy-app-theme);
@include mat-checkbox-theme($candy-app-theme);

【讨论】：