When mpvue cited Vant-weapp, did not convert px to rpx original solution to the problem (step on pit record)

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.

This link: https://blog.csdn.net/qq_36710522/article/details/99409054

Since node_modules not compiled into the dist directory, so use npm installed vant-weapp also need vant file repository folder to your project directory static, so far the problem lies on the static files in a folder packed time will not be packaged into webpack, when used in accordance with vant-weapp still inherent in px units, if every reference to a component to be modified, then too much trouble, so you can modify the configuration file to achieve compiled under webpack conversion:
modify the file FIG follows:

modify code (a search keyword in the file CopyWebpackPlugin):
before:

 new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
      }
 ])

Modified (increased level determination):

 var Px2rpx = require('px2rpx'); 
 var px2rpxIns = new Px2rpx({ rpxUnit: 0.5 });
 new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
        transform(content, path) {
          if (path.endsWith('.wxss')) {
            return px2rpxIns.generaterpx(content.toString(), 1)
          } else {
            return content
          }
        },
        ignore: ['.*']
      }
 ]),

This way you can achieve static configuration inside .wxss file will be compiled in, to achieve the conversion.