基于vue-cli3的vue项目 通过postcss-pxtorem 实现px自动转换成rem

使用postcss-pxtorem 项目中的px转换为rem，rem单位用于适配不同宽度的屏幕。

如何在vue-cli3.0中使用postcss-pxtorem 插件

1、 安装依赖包

npm install lib-flexible --save
npm install postcss-pxtorem --save-dev

2、引入lib-flexible

在项目入口文件main.js 中引入lib-flexible

import "lib-flexible/flexible.js";

3、配置postcss-pxtorem

vue-cli3 项目postcss-pxtorem的配置放在vue.config.js中（新构建的项目可能会找不到，需要手动在项目根目录创建vue.config.js）。
具体配置方法如下：

module.exports = {
     css: {
        loaderOptions: {
              postcss: {
                plugins: [
                     // 把px单位换算成rem单位
                  require("postcss-pxtorem")({
                        rootValue: 75, // 换算的基数(设计图750的根字体为32)
                        selectorBlackList: [".van"],// 要忽略的选择器并保留为px。
                        propList: ["*"], //可以从px更改为rem的属性。
                        minPixelValue: 2 // 设置要替换的最小像素值。
                    })
                ]
              }
         }
    }
}