vant配置：以及解决 “Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.”问题

1.

npm install postcss-pxtorem --save
1

2.utils文件夹下（定制软件没有就新建一个）,新建一个rem.js

copy以下代码：

const baseSize = 37.5 //跟postcss.config.js中rootValue定制软件的值是一致的// 设置 rem 函数function setRem () {	// 定制软件当前页面宽度相对于 375 定制软件宽的缩放比例，可根据自己需要修改。  vantUI使用的是375px页面宽，这里使用375px	const scale = document.documentElement.clientWidth / 375	// 设置页面根节点字体大小 最高为两倍图 即设计稿为750	document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'}// 初始化setRem()// 改变窗口大小时重新设置 remwindow.onresize = function () {    setRem()}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3.根目录下创建postcss.config.js文件

copy以下代码

module.exports = {    plugins: {        'postcss-pxtorem': {            rootValue: 37.5, // 已设计稿宽度375px为例 vant用的是375的设计稿            propList: ['*'],        },    },};
1
2
3
4
5
6
7
8

4.main.js引入rem.js文件

import “utils/rem.js” //我是在vue.config.js配置了快捷路径，按自己的路径来就好
1

重新npm run serve一下。到这配置结束。

5.如果报错：“Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.”

6.报错的意思是postcss-pxtorem为8.0，但实际上官网最新版本为6.0（有可能是6.0版本与vant不兼容）,所以直接把postcss-pxtorem版本降成5.1.1就好了。（这里是参照的是

大佬的解决方法：https://www.cnblogs.com/liangziaha/p/14492288.html）

npm i postcss-pxtorem@5.1.1
1

npm安装后，package.json里面查看postcss-pxtorem的版本，可以看到已经变成指定的5.1.1版本。

重新npm run serve一下，就可以了