Vant移动端 REM 适配以及.遇见Error: PostCSS plugin postcss-pxtorem requires PostCSS 8的解决方案

Vant中使用的是px作为单位，当我们使用rem来适配各类移动端设备尺寸的时候，我们就需要使用到下面的两个工具

postcss-pxtorem 是一款postcss插件 用来将单位转化为rem

lib-flexible 用来设置rem的基准值

下面我们依次将连个工具配置到项目中完成适配 

# yarn add amfe-flexible //或者下面的
npm i amfe-flexible

安装lib-flexible 动态的设置我们的基准值

并且在main.js中 引用该组件

import 'amfe-flexible'

此时如果成功 运行项目切换不同的手机设备尺寸font-size会发生改变

npm i postcss-pxtorem@5.1.1 -D
//这里建议安装5.11的因为6.0的需要安装8.0的postcss才可以运行不然会报错

然后再在根目录中创建.postcssrc.js文件

在其中添加

module.exports = {
	plugins: {
		'postcss-pxtorem': {
			// 表示需要转换的css的属性 * 表示所有
			rootValue({ file }) {
				return file.indexOf('va