postcss-pxtorem通过回调函数排除指定文件

背景

最近由于一个需求，需要把现存的移动端项目和PC端项目整合为一个项目，在整合过程遇到一个问题，移动端需要使用px2rem来将px转换成rem，而PC端却不需要对px转换为rem，且px2rem没有提供在转换的时候忽略指定文件的功能，通过查阅资料发现有另外两个postcss插件有着和px2rem一样的功能并且还能通过配置来忽略指定文件。

postcss插件

• postcss-pxtorem
• postcss-px2rem-exclude

exclude回调函数排除指定文件

这两个插件都能通过配置exclude，传递一个正则表达式来忽略指定文件，这里我选择的是postcss-pxtorem，因为它的exclude可以接收一个回调函数，配置起来更灵活。该回调函数会在每个文件被转换之前被调用，并通过返回一个布尔值来决定是否转换该文件。

配置

    {
        rootValue: 37.5,//html的fontSize值，设计稿宽度/rootValue = rem值
        unitPrecision: 5,//保留rem小数点多少位
        propList: ['*'],//设置px转换成rem的属性值，*表示所有属性的px转换为rem
        exclude: (file)=>{
            const ignore=['pages\\m\\','components\\m\\','layouts\\m\\','vant']
            for(const str in igonre){
                if(file.findIndex(str)!=-1)return false
            }
            return true
        }
    }

我这里排除了所有文件的路径中不包含 pages\m\、components\m\、layouts\m\ 和 vant 的文件。

提示

• propList必须写,否则所有样式都不会进行转换
• 需要用双反斜杠（ \\ ）划分文件路径，否则会匹配不上