postcss-pxtorem中使某些样式不进行rem转换_.postcssrc.js里面,过滤掉对该class的rem转换,保持使用px进行样式设置-CSDN博客

在移动端项目中，使用postcss-pxtorem时，若需防止第三方UI库组件样式被转换，可利用其配置参数`exclude`排除文件或目录，或者使用`selectorBlackList`忽略特定选择器。例如，通过匹配类名前缀`.xxx-datetime`来确保第三方组件xxx-datetime的样式不受px转rem影响，强调了CSS命名规范的重要性。

问题解决

在移动端项目中使用 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 目录下样式全部不转义
    }
  }
}

参考资料

postcss-pxtorem