原生小程序npm组件px转rpx

背景

小程序(原生小程序框架)目前已经能够很好的支持npm依赖，但是当我们使用了第三方组件库(eg. Vant)时，组件默认样式都是使用的px，这无法和我们页面中的rpx单位相兼容。

解决方案

==gulp== + ==gulp-postcss== + ==postcss-px2units== 静态转换

此方法同样可以将未使用rpx的小程序项目做统一转换

// 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/'));
});

更多参数请参考 postcss-px2units

// package.json

"scripts": {
    "px2rpx": "gulp css"
}

安装完依赖后执行 ==npm run px2rpx==