postcss-pxtorem 配置 px 转 rem 处理

这是我参与更文挑战的第 14 天，活动详情查看： 更文挑战

Lynne，一个能哭爱笑永远少女心的前端开发工程师。身处互联网浪潮之中，热爱生活与技术。

前言

问题： rem实现尺寸自适应设备匹配时出现样式错误

要实现： postcss-pxtorem中使某些样式不进行rem转换

UI组件样式问题

可以定位这个问题为 UI组件样式问题。

在移动端项目中使用 postcss-pxtorem 做适配，同时也使用到了第三方 UI 库。

在多数时候如果我们不希望对某些文件下的组件做 px 转 rem 处理，可以在配置文件 postcssrc.js 中配置postcss-pxtorem 的 exclude 属性来过滤掉。

exclude 配置的值可以是字符串也可以是正则匹配，它匹配的是文件名或目录。用法如下：

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {
      browsers: ['Android >= 4.0', 'iOS >= 7', "last 2 versions"]
    },
    "postcss-pxtorem": {
      rootValue: 23.4375, // 640
      propList: ['*'],
      selectorBlackList: [],
      minPixelValue: 1,
      exclude: /src/ig   // src 目录下样式全部不转义
    }
  }
}

这时就出现了一个问题：第三方UI库使用的是px，而postcss将页面中的px 全部转化成了rem，导致部分组件的样式乱了，但有些组件是正常的，也达到了我们想要的放大或缩小的结果，这时候怎么处理部分组件样式呢？

查询postcss配置文档后发现 其提供了selectorBlackList 属性来忽略掉某些选择器。

举个栗子，我需要保证某个第三方组件xxx-datetime样式不转换，只需要找到它内部涉及样式的类名，简洁的办法是直接用类名前缀去匹配，比如“.xxx-datetime”，如果内部涉及不加前缀的类名，就只能枚举了。

突然感受到了CSS命名规范的重要性有木有！！！具体配置如下：

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {
      browsers: ['Android >= 4.0', 'iOS >= 7', "last 2 versions"]
    },
    "postcss-pxtorem": {
      rootValue: 23.4375, // 640
      propList: ['*'],
      selectorBlackList: ['.xxx-datetime', '.scroller-component', '.scroller-indicator', 'scroller-item'],
      minPixelValue: 1,
      exclude: /src/ig    // src 目录下样式全部不转义
    }
  }
}

总结

这个问题的解决办法在官方文档中就可以找到，当时没有仔细看文档还纠结了好久，所以有时候查看官方文档和issue虽然很笨，但真的有用！