angular build size with sass is huge

Question

So, I'm working on big app and all components have their own sass file style (we use ViewEncapsulation.Native) but I build npm run build --stats-json --prod --aot and check the stats with https://chrisbateman.github.io/webpack-visualizer/ I get this

All those big orange blocs on the right are sass.shim.ngstyle.ts files and each one is like 195k !

Answer 1

so after some investigation the problem was that every component was importing the _mixins.sass but the mixins was also importing bootstrap-custom.sass file that was quite large in size.

the solution was to import _bootstrap-custom.sass from the _main.sass and import bootstrap-custom-variables.sass from mixins.sass file because some custom mixins needed those variables.