微信小程序 vant 组件库 px 转 rpx

技术：gulp

首先微信小程序构建npm，具体构建 可以参考：https://www.jianshu.com/p/71fbdc76766f

构建后会生成一个miniprogram_npm文件夹

安装npm包 

npm install gulp gulp-postcss postcss-px2units --save-dev

在根目录下新建gulpfile.js文件

var gulp = require('gulp');

var postcss = require('gulp-postcss');

var pxtounits =  require('postcss-px2units'); 

gulp.task('css', function () {

  return gulp.src(['miniprogram_npm/@vant/weapp/**/*.wxss'])

    .pipe(postcss([pxtounits({

      multiple: 2,

      targetUnits: 'rpx'

    })]))

    .pipe(gulp.dest('miniprogram_npm/@vant/weapp/'));

});

在package.json里script中添加一个命令

"scripts": {

   "build": "gulp css",

   "test": "echo \"Error: no test specified\" && exit 1"

 },

执行命令

npm run build

然后就可以看到组件中的px都转为了rpx

另外只要更改一下文件夹你的项目也可以适配了

var gulp = require('gulp');

var postcss = require('gulp-postcss');

var pxtounits =  require('postcss-px2units'); 

gulp.task('css', function () {
                   //文件读取入口 这里更改你项目的根目录
  return gulp.src(['根目录名字/**/*.wxss'])

    .pipe(postcss([pxtounits({

      multiple: 2,

      targetUnits: 'rpx'

    })]))
                    //文件输出目录
    .pipe(gulp.dest('根目录/'));

});