postcss-pxtorem：移动端px自动转为rem

安装：

npm install postcss-px2rem

vue2.x:

webpack：

npm install postcss-loader
var px2rem = require('postcss-px2rem');
module.exports = {
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: "style-loader!css-loader!postcss-loader"
      }
    ]
  },
  postcss: function() {
    return [px2rem({remUnit: 75})]; //设置基准值，75是以iphone6的标准
  }
}

vue3.x：

vue.config.js：

module.exports = {
    lintOnSave: true,
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({
                        rootValue : 75, // 换算的基数
                        // 忽略转换正则匹配项。插件会转化所有的样式的px。比如引入了三方UI，也会被转化。目前我使用 selectorBlackList字段，来过滤
                        //如果个别地方不想转化px。可以简单的使用大写的 PX 或 Px 。
                        selectorBlackList  : ['weui','mu'], 
                        propList   : ['*'],
                    }),
                ]
            }
        }
    },
}


如果是使用 postcss-px2rem：
module.exports = {
    lintOnSave: true,
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-px2rem')({remUnit: 30}), // 换算的基数
                ]
            }
        }
    },
}

gulp：

npm install gulp-postcss

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

gulp.task('default', function() {
  var processors = [px2rem({remUnit: 75})];
  return gulp.src('./src/*.css')
    .pipe(postcss(processors))
    .pipe(gulp.dest('./dest'));
});

详细配置