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虽然很笨，但真的有用！