vue3：rem（postcss-pxtorem、postcss 、amfe-flexible）

postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
lib-flexible 用于设置 rem 基准值

1、安装postcss、lib-flexible

npm install postcss postcss-pxtorem --save-dev
npm i -S amfe-flexible

2、main.js中引入

import 'amfe-flexible';

3、创建名为postcss.config.js的文件放在根目录，记得要重新运行项目。

module.exports = {
	plugins: {
		'autoprefixer': {},
		'postcss-pxtorem': {
			rootValue({
				file
			}) {
				return file.indexOf('vant') !== -1 ? 37.5 : 75;
			},
			propList: ['*'], //允许哪些属性转成rem;
			unitPrecision: 5, //最多小数位数;
			selectorBlackList: [/^\.van-/, /^\.mescroll/], //忽略.van-和.mescroll开头的类名;
			replace: true,
			mediaQuery: false, //允许在媒体查询中转换px
			minPixelValue: 2, //设置要替换的最小像素值
		}
	}
}

4、重新运行项目，会有一个错误提示，如果有的话需要降低postcss-pxtorem的版本号就行

Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.
解决方案：降低postcss-pxtorem版本，重新启动就可以了
npm i postcss-pxtorem@5.1.1

5、正常运行后，由下图可以看到，px正常转rem