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

50次阅读

共计 871 个字符，预计需要花费 3 分钟才能阅读完成。

置信最近应用 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 了。

正文完