解决vue安装postcss-pxtorem运行后报错 Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.

相信最近使用postcss-pxtorem 做移动端适配的同学会发现，安装完postcss-pxtorem并配置好vue.config.js后，会报错Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.，明明是按以往配置，怎么突然出错了…

实际上postcss-pxtorem已经步入6.0版本。
需要依赖于postcss8.0实现（具体项还没研究清楚~~TAT）

那么解决办法也很简单，查看package.json里postcss-pxtorem的版本是否在6.0以上。

如果是，通过$ npm install postcss -D把postcss安装了就行，其他一切如常。因为自动安装最新，所以不用担心postcss不是8.0的。

或者你可以选择使用postcss-pxtorem5.0的，通过命令$ npm install postcss-pxtorem@5.0.0 -D安装就行，这样就不用添加postcss依赖了。

---

其他配置如下：

• main.js中引用amfe-flexible

  import "amfe-flexible";
  

• 根文件目录创建vue.config.js文件，添加如下配置：

  module.exports = {
    css: {
      loaderOptions: {
        postcss: {
          plugins: [
            require("postcss-pxtorem")({
              // 把px单位换算成rem单位
              rootValue: 37.5, // 换算的基数(设计图750的根字体为75)
              // selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
              propList: ["*"],
            }),
          ],
        },
      },
    },
  };
  

然后重新运行项目就可正常使用了。

不过只能转换css、sass、less等外部样式，以及vue文件中的style标签内的样式。
对于行内样式是没办法转换的。

• iphone 6/7/5
  
  

• iPad Pro
  
  html的font-size会随着设备宽度进行变化，就代表着已经设置成功了。

• 当然也可以更直观的看是否被转换为rem了。