Development environment: @tarojs/taro”: “3.1.2” taro-ui”: “taro-ui@next @tarojs/react”: “3.1.2”

Problem description:

In the WeChat development tool click real machine debugging, appear above prompt, click upload also have this prompt.

Solution of sub-cases:

We performyarn build:weapThe WXSS file inside is very large, more than 150 KB in size (see figure below).

After locating the problem, we reasoned with the previous thinking:

  1. /custom-variables. SCSS: /custom-variables. SCSS: /custom-variables. The default taro-ui style file @import “~taro-ui/dist/style/index.scss” is introduced in the custom-variables.scss file.
  2. In order to be able to use the theme variables in the taro-ui style file in all SCSS files, we configured sass from the taro official website to insert SCSS code into all SCSS file headers.

When we look at the ~taro-ui/dist/style/index.scss file, we see that it consists of three files:

Combined with the above two points, it means that all of our SCSS files import these three files in the header: ‘./variables/default.scss’ (small files), ‘./mixins/index.scss’ (large files), and ‘./components/index.scss’ (large files) directly cause each WXSS file to be very large when compiled.

After we find out the reason, the problem will be solved. In fact, we just want to use the theme variables from the taro-ui style file in all SCSS files./variables/default.scss. SCSS instead of ~taro-ui/dist/style/index.scss, which contains three files, the small file./variables/default.scss will do the job. The ‘./mixins/index.scss’ (large file) and ‘./components/index.scss’ (large file) are Taro-UI component related styles, so we just need to introduce them in the app.scss file.

With this in mind, all the WXSS files after compilation are small, except for app.wxss, which is a little larger (because it introduces ~taro-ui/dist/style/index.scss), and some are only a few hundred B (see figure below).

How does FAQ automatically introduce SCSS global variables into each individual SCSS file? I believe that you should know how to introduce the solution to the problem.