问题描述:
如图:
在uni.scss通过import导入的全局样式在编译后的每个.wxss文件里都加载了一遍,导致大量样式重复和小程序包体积过大
解决思路
查看社区讨论
在dcloud社区找了一下有相同问题的单没有准确回答的,网上搜了一下看有人说分包吧, 我: .....
分析编译文件,逐步排查
分包是治标不治本,仔细研究了一下uni-app编译小程序的过程,
发现写在app.vue里的全局样式是没有被重复加载的,uni.scss引入文件里的样式变量也是没有被重复加载的,
被重复加载的只有uni.scss引入的样式文件里的css样式,真相了....
总结
编译后的每个 wxss 文件都有重复的公共css，而这些css 样式都是放到根目录uni.scss文件里的,而uni.scss文件里定义的变量却不会被重复加载
解决办法
uni.scss 里只定义或引入样式变量，而其他的css都写在app.vue里或在app.vue里引入就可以了
最后再上张图,解决之后:
🎨 原创不易，支持请点赞、转载请注明本文作者为子成君
我裂开了，困扰一天的问题解决了。搞了半天代码压缩，自定义编译，分包，实在分不了了，结果主包还是那么大，寻思也没有写多少代码。
后来去看编译后的文件，一个个排查，开始以为是vendor.js的问题，但这个文件也不大，就几百k。继续排查，发现组件里面编译出来的wxss不对劲，都太大了。
然后百度到这篇文章，茅塞顿开，恍然大悟。真从没想过css也能使绊子。
为了css复用，又不想写在App.vue里面,也不想直接写在uni.scss里面，就另外搞了个文件，然后在uni.scss中引入，最后酿成大错。
楼主好人，感谢楼主。
@未名[aru_19]网站居然有人评论了 激动死了
我没有在uni.scss 中引入 编译成微信小程序文件wxss还是很大呢
哈哈哈，感谢感谢，我也是有着同样的问题，终于解决啦[aru_53]