vue3.0+vite配置rem

插件安装

postcss-pxtorem 是PostCSS的插件，用于将像素单元生成rem单位
autoprefixer 浏览器前缀处理插件
amfe-flexible 可伸缩布局方案 替代了原先的lib-flexible 选用了当前众多浏览器兼容的viewport 

npm i postcss-pxtorem  
npm i autoprefixer
npm i -S amfe-flexible

autoprefixer配置

在项目的postcss.config.js中加入

module.exports = {
	plugins: {
		autoprefixer: {
			overrideBrowserslist: [
				"Android 4.1",
				"iOS 7.1",
				"Chrome > 31",
				"ff > 31",
				"ie >= 8",
				"last 10 versions" // 所有主流浏览器最近10版本用
			],
			grid: true
		},
		"postcss-pxtorem": {
			rootValue: 192, // 设计稿宽度的1/ 10
			propList: ["*", "!border"], // 除 border 外所有px 转 rem
			selectorBlackList: [".el-"] // 过滤掉.el-开头的class，不进行rem转换
		}
	}
};

amfe-flexible 在main.js中引入即可 

import "amfe-flexible/index.js";

快在控制台查看下是否转换为rem

 

 Tips: 如果你不想转换成rem，就把px的单位大写PX