This question is related to this answer. The main goal is to find best way to optimize bundle size of themed components.
Well, we have a theme like this:
amber
├ _variables.scss
├ theme.scss
_variables.scss:
$amber-primary: mat-palette($orange);
$amber-accent: mat-palette($orange, A700, A100, A400);
$amber-warn: mat-palette($mat-red, A200);
$amber-theme: mat-light-theme($amber-primary, $amber-accent, $amber-warn);
theme.scss:
.amber-theme {
@include angular-material-theme($amber-theme);
}
And in the parent folder there's some _variables file to gather all colors and themes together:
@import '~@angular/material/theming';
@import 'colors';
@import 'amber/variables';
...
Looks cool, right? BUT! If you bundle this with scss-bundler and create your own library it still should be not big at all (I've got 11 Kb for ~14 themes). When you include your styles.scss with all themes - it works as expected and everything should be fine.
The problems appears when you want to customize some component. Icluding styles.scss is really bad idea, as related answer says, and it's true - got ~2,68 Mb per themed component. But including _variales.scss providing too much aswell - 260 Kb per themed component still a big deal. I've research generated code and discovered that '~@angular/material/theming included for each themed component. Well, this should be right for Angular way of isolating styles for components, and I can't just drop this file, because there's related mixins, but maybe there's some another way to make this file global and do not include it into each and every component I want to customize?
