vue+vant项目中 rem适配配置

vant rem适配，需要安装两个插件

• postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem  
• lib-flexible 用于设置 rem 基准值

postcss-pxtorem：

npm install postcss-pxtorem --save-dev

lib-flexible：

npm i -S amfe-flexible

main.js 引入amfe-flexible

import 'amfe-flexible/index.js'

在postcss.config.js文件内(没有就在根目录创建一个)

module.exports = {
  plugins: {
    'autoprefixer': {
      overrideBrowserslist: [
        'Android 4.1',
        'iOS 7.1',
        'Chrome > 31',
        'ff > 31',
        'ie >= 8'
      ]
    },
    'postcss-pxtorem': {
      rootValue: 100,
      propList: ['*']
    }
  }
}

重启项目

 

注意：

border使用px，不转化为rem方法：   大写PX ，例：1PX solid #f00;