vue-cli项目使用px转rem插件

vue-cli项目使用px转rem插件

注：
之前使用 px2rem-loader 插件，但会影响Vant组件变小，
只能执行命令 npm uninstall px2rem-loader 卸载 px2rem-loader，
后改使用 postcss-pxtorem 插件，完美解决 Vant 组件变小的问题。

使用步骤：
1、index.html：
使用

2、安装：
postcss-pxtorem 与 lib-flexible 搭配（推荐移动端使用；经测试：根字号大小不会根据页面尺寸宽度极限变大而变化，依据的页面最大尺寸宽度为540px）
npm install [email protected] lib-flexible --save
或
postcss-pxtorem 与 amfe-flexible 搭配（推荐兼容PC端如大屏展示效果使用；经测试：根字号大小一直会根据页面尺寸宽度极限变大而变化）
npm install [email protected] amfe-flexible --save

3、在项目入口文件 main.js 中引入 lib-flexible 或 amfe-flexible
与 lib-flexible 搭配
import 'lib-flexible/flexible.js'
与 amfe-flexible 搭配
import 'amfe-flexible';

4、在 .postcssrc.js 中添加过滤

'postcss-pxtorem': {
  rootValue: 75, // 设计稿尺寸/75，如设计稿尺寸宽度750px，最终换算后为1rem=75px
  propList: ['*'], // 是一个存储哪些将被转换的属性列表，这里设置为['*']全部，假设需要仅对边框进行设置，可以写['*', '!border','!border-top','!border-bottom','!border-left','!border-right']
  unitPrecision: 5, // 保留rem小数点多少位
  selectorBlackList: ['van','html'], // 忽略转换正则匹配项，对css选择器进行过滤的数组，px不会转rem
  mediaQuery: false, // 媒体查询( @media screen 之类的)中不生效
  minPixelValue: 4, // px小于4的不会被转换
}