vant设置rem适配

官方demo

github.com/youzan/vant…

package.json

yarn add autoprefixer -D
yarn add postcss-pxtorem -D
yarn add amfe-flexible -D

vue.config.js

const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');
module.exports = {  
  outputDir: 'dist', 
  publicPath: process.env.NODE_ENV === 'production' ? '/vant-demo/' : '/',  
  css: {   
    loaderOptions: {    
    postcss: {       
    plugins: [       
      autoprefixer(),    
      pxtorem({        
        rootValue: 37.5,       
        propList: ['*']      
      })  
     ]  
    }  
  } 
 }
};

main.js

import 'amfe-flexible';

注意

package.json 中 postcss-pxtorem版本v6与v5有差异，以上设置仅针对v5

"postcss-pxtorem": "~5.0.0",