postcss-pxtorem排除特定文件和目录

css yekong 44℃

数据可视化大屏项目中,我们为了适配大屏,我们需要将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);
            }
        }
    }
}

喜欢 (0)