Search code examples
angularangular-materialangular-material-7

Angular Material - exclude components styles

I work on an angular v8 app and I've encountered an issue with making a production build. I noticed that style.scc generated is of 1.5 MB! I use Material and I don't use all the components of it.

So the question - is there any a way to include the needed components styles only in the production style.css? Say, .mat-icon {...}, .mat-form-field {...} styles definition only and so on.

Thanks for advance!

Solution

  • The guide on the Material website shows that you can include only certain components. You have to manually import and include the base theme mixins in order to do this, but it should allow you to reduce the size of your .scss files:

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