vue cli4引入vant并配置自动rem换算 postcss-pxtorem和lib-flexibl + 黑名单

在引入vant的时候，我看到官方推荐了两个自动转换px为rem的插件，一个叫postcss-pxtorem，一个叫lib-flexible。

他们的用法如下：

安装插件：

安装postcss-pxtorem

  npm install postcss-pxtorem --save-dev

安装lib-flexible

由于时间的问题，lib-flexible其实已经弃用了，现在是使用名为amfe-flexible的插件，amfe-flexible实际上就是在lib-flexible的基础上更新的，所以用法都是一样。

npm i -s  amfe-flexible

安装完毕只需要引入amfe-flexible

引入插件：

main.js文件引入：

import 'amfe-flexible'

创建配置文件：

在根目录，和package.json同级，创建一个名为postcss.config.js的文件，然后里面的内容我直接照搬vant提供的。

如果有这个文件，可以自行修改里面的内容，没有才创建。

module.exports = {
  plugins: {
    autoprefixer: {
      browsers: ['Android >= 4.0', 'iOS >= 8'],
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
    },
  },
};

然后保存，这个时候我们再去vue里面，对元素设置px，运行时会发现网页上自动转换成了rem单位。

百度到一个新的配置

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

黑名单

顾名思义，在黑名单中的类名，将不会自动rem转换

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