带有 sass 的 Angular 构建大小是巨大的

Question

所以，我正在开发大型应用程序，所有组件都有自己的 sass 文件样式(我们使用 ViewEncapsulation.Native)，但我构建了 npm run build --stats-json --prod --aot 并使用 https://chrisbateman.github.io/webpack-visualizer/ 检查统计数据我明白了

右边所有那些大的橙色 block 都是 sass.shim.ngstyle.ts 文件，每个文件都像 195k !

Answer 1

所以经过一些调查，问题是每个组件都在导入 _mixins.sass 但 mixins 也在导入 bootstrap-custom.sass 文件，该文件在尺寸。

解决方案是从 _main.sass 导入 _bootstrap-custom.sass 并从 导入 bootstrap-custom-variables.sass code>mixins.sass 文件，因为一些自定义 mixins 需要这些变量。