I have standard angular 9 application with material theming. We experienced the problem of increased bundles sizes and found out that our reuse of scss styles causes this increase. The issue was that imported scss was compiled in the component as stated in this blog.
Initial we wanted to reused the material theming variables as follows in our angular components
@import './theme.scss';
test{ background-color: mat-color($app-primary) }
To tackle this issue we followed the blogs.advice to move such code as either global style or using sass mixins. We implemented the sass-mixins as followed and reused it in our component styles:
@mixin primary-background-color {
background-color: mat-color($app-primary);
}
@import 'mixins.scss'
.test {
@include primary-background-color;
}
Nevertheless, following this advice the bundle sizes decreased a little bit by using sass-mixins, but not as much as we would move the entire code to gobal style.
This leads so my question: Is there a recommended usage of reuse material theme colours in components styles? I cannot believe that the "solution" for my problem is moving the component styles to global style!?
Looking forward to helpfull anwsers! Cheers!