关于vue.js:解决vue安装postcsspxtorem相关报错

置信最近应用postcss-pxtorem + amfe-flexible挪动端适配的同学会发现，装置完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标签内的款式。
对于行内款式是没方法转换的。




html的font-size会随着设施宽度进行变动，就代表着曾经设置胜利了。
当然也能够更直观的看是否被转换为rem了。