taro 微信小程序开发 代码包超过2048kb导致不能上传和真机调试问题

开发环境：
@tarojs/taro": "3.1.2"
taro-ui": "taro-ui@next
@tarojs/react": "3.1.2"

问题描述：

在微信开发中工具里面点击真机调试，出现上述提示 ，点击上传同样有这个提示。

解决分案：
我们执行yarn build:weap后，发现，里面的wxss文件很大，有150多kb大小（见下图）

定位到问题后，我们理了下之前的思路：

1. 项目中的taro-ui样式文件引入的方式，在app.scss里面引入了自定义的./custom-variables.scss文件，custom-variables.scss文件里面引入了了taro-ui的默认样式文件@import "~taro-ui/dist/style/index.scss"。
2. 为了能够在所有的scss文件里面能够用上taro-ui样式文件里面的主题变量，我们根据taro的官网配置了sass,其作用是可以往所有 scss 文件头部插入 scss 代码。

查看~taro-ui/dist/style/index.scss文件发现，它由三个文件组成：

结合上面两点，也就是说我们所有的scss文件的头部都导入了这三个文件：'./variables/default.scss'（小文件）、'./mixins/index.scss'（大文件）和'./components/index.scss'（大文件），这直接导致编译后，每个wxss文件非常大。
原因找到以后，问题就好解决了，其实我们只是希望在所有的scss文件里面能用上taro-ui样式文件里面的主题变量，也就是./variables/default.scss这个小文件，因此./custom-variables.scss里面只需引入./variables/default.scss这个小文件就可以了，而不是包含三个文件的~taro-ui/dist/style/index.scss。至于'./mixins/index.scss'（大文件）和'./components/index.scss'（大文件）这两个大文件是taro-ui组件相关的样式，因此我们只需要在app.scss文件里面引入一下就OK了。
按照这个思路，修改后，再编译后，除了app.wxss文件稍大一点外（因为它引入的是~taro-ui/dist/style/index.scss），其余的wxss文件都很小一两k有的甚至只有几百b(见下图)

FAQ
如何自动在每个单独的 SCSS 文件中引入 SCSS 全局变量？
相信看了本文的解题思路，你应该知道该如何引入了。