数据可视化大屏项目中，我们为了适配大屏，我们需要将px转为rem但是我也会遇到特别的情况，比如只有部分页面需要转换，另外一部分页面不需要转换。

测试环境

vue3 vite js 和 vue2 webpack js

测试版本

"postcss": "^8.4.21",
"postcss-loader": "^7.0.2",
"postcss-pxtorem": "^6.0.0",

和

"postcss": "^8.4.21",
"postcss-loader": "^7.0.2",
"postcss-pxtorem": "^5.1.1",

排除特定页面

这里我们会排除掉src/view/home2 这个路径下面的文件，让其仍然维持px不转为rem.

module.exports = {
    plugins: {
        autoprefixer: {},
        "postcss-pxtorem": {
            "rootValue": 192,
            selectorBlackList: [".ivu"],
            minPixelValue: 2,
            "propList": ["*"],
            exclude: function(file) {
                // 排除 src/view/home2 目录
                return /src[\\/]view[\\/]home2/.test(file);
            }
        }
    }
}

只转换特定文件

这里我们所有文件都不转换，只转换src/view/home2 这个路径下面的文件，让其仍然维持px不转为rem.

module.exports = {
    plugins: {
        autoprefixer: {},
        "postcss-pxtorem": {
            "rootValue": 192,
            selectorBlackList: [".ivu"],
            minPixelValue: 2,
            "propList": ["*"],
            exclude: function(file) {
                // 排除 不是 src/view/home2 目录的文件
                return !/src[\\/]view[\\/]home2/.test(file);
            }
        }
    }
}

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