首先项目中需要配置了postcss-pxtorem

vue3 数据大屏实现屏幕自适应 px转rem

找到postcss.config.cjs

添加exclude

module.exports = {
    plugins: {
        autoprefixer: {},
        // flexible配置
        "postcss-pxtorem": {
            "rootValue": 192,// 设计稿宽度或者目前正常分辨率的1/10
            selectorBlackList: [".ivu"],// 要忽略的选择器并保留为px。
            minPixelValue: 2,// 设置要替换的最小像素值。
            "propList": [
                "*"
            ],// 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
            exclude: ['node_modules']
        }
    }
}

postcss-pxtorem

postcss-pxtorem是postcss的一个插件，可以将对应的像素单位转换为rem。在vite中可以直接对其进行配置，因为vite已经集成了postcss。

其中最重要的配置属性为：

rootValue：根元素的值，即1rem对应的像素值大小。一般设置为设计稿尺寸/10
以及一些其他属性：

propList：需要进行转换的css属性的值，可以使用通配符。如：*意思是将全部属性单位都进行转换；["position"]会匹配到background-position-y
selectorBlackList：不进行单位转换的选择器。如设置为字符串body，则所有含有body字符串的选择器都不会被该插件进行转换；若设置为[/^body$/]，则body会被匹配到而不是.body
exclude：不需要进行单位转换的文件
mediaQuery：是否允许像素在媒体查询中进行转换