vue中使用postcss-pxtorem实现适配

前言

很少在pc端使用rem，不过做c端产品的，还是得在每个尺寸下都和设计稿完全一样，在自己手写媒体查询和插件之间选了后者，一劳永逸，今天就说下配置及使用；下面是在vue2.6、vue-cli4中的配置(注意：不同版本配置方式不同)

安装amfe-flexible和postcss-pxtorem

npm install postcss-pxtorem -S
npm install amfe-flexible -S

postcss-pxtorem将px转为rem；
amfe-flexible可进行屏幕自适应；

配置及使用

1. 在main.js中引入amfe-flexible

import  "amfe-flexible";

2. 根目录下添加postcss.config.js

module.exports = () => ({
  plugins: [
  	// autoprefixer 自动补齐 CSS3 前缀，适配不同浏览器
    require('autoprefixer')({
      overrideBrowserslist: [
        "last 10 versions", // 所有主流浏览器最近10版本用
      ],
    }),
    require('postcss-pxtorem')({
      rootValue: 192.0, //设计稿元素尺寸/10，这里设计稿宽度为1920
      propList: ["*"], //是一个存储哪些将被转换的属性列表，这里设置为['*']全部，假设需要仅对边框进行设置，可以写['*', '!border*']
      unitPrecision: 3, //保留rem小数点多少位
      selectorBlackList: ['el-input', 'el-step', 'no-'],//则是一个对css选择器进行过滤的数组，比如你设置为['el-']，那所有el-类名里面有关px的样式将不被转换，这里也支持正则写法。
      replace: true, 
      mediaQuery: false, //媒体查询( @media screen 之类的)中不生效
      // minPixelValue: 3, //px小于3的不会被转换
    })
  ]
});

配置完成之后，重启即可

可能遇到问题

运行报错如下

Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.

这个我也是看了这篇文章解决（解决vue中安装postcss-pxtorem插件，报错.）的，就是直接指定安装postcss-pxtorem版本为5.1.1即可解决