Angular Material - 排除组件样式

Question

我在开发 angular v8 应用程序，但在进行生产构建时遇到了问题。我注意到生成的 style.scc 是 1.5 MB！我使用 Material 但我没有使用它的所有组件。

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

感谢提前！

Answer 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);

Angular Material - 排除组件样式

Angular Material - exclude components styles

angular-material

angular

angular-material-7