Angular Материал - исключить стили компонентов

Question

Я работаю над приложением angular v8 и столкнулся с проблемой при создании рабочей сборки. Я заметил, что размер style.s cc составляет 1,5 МБ! Я использую материал и не использую все его компоненты.

Итак, вопрос - есть ли способ включить необходимые стили компонентов только в производственный стиль. css? Скажем, только определение стилей .mat-icon {...}, .mat-form-field {...} и т. Д.

Спасибо за продвижение!

Answer 1

Руководство на веб-сайте материалов показывает, что вы можете включать только определенные компоненты. Чтобы сделать это, вы должны вручную импортировать и включить базовые миксины тем, но это должно позволить вам уменьшить размер ваших файлов .s css:

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