postcss-pxtorem 与element-ui结合使用

当使用 `postcss-pxtorem` 和 `element-ui` 结合使用时，我们可以实现自动将 `px` 单位转换为 `rem` 单位，以适应不同设备的屏幕大小。

首先，确保已经安装了 `postcss-pxtorem` 和 `element-ui` 插件。然后，在项目的根目录下创建一个名为 `postcss.config.js` 的文件，并添加以下内容：

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 16,
      propList: ['*'],
      selectorBlackList: ['el-']
    }
  }
}

上述配置中，`rootValue` 表示根元素的字体大小，这里设置为 16px。`propList` 表示要转换的属性列表，使用 `*` 表示所有属性都需要转换。`selectorBlackList` 表示需要忽略的选择器列表，这里使用了 `el-` 来忽略 `element-ui` 的样式。

接下来，在项目的入口文件（一般是 `main.js`）中引入 `element-ui` 的样式文件：

import 'element-ui/lib/theme-chalk/index.css';

最后，在项目的构建工具中配置 `postcss-loader`，例如在 Vue CLI 项目中，找到 `vue.config.js` 文件，并添加以下配置：

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        config: {
          path: 'postcss.config.js'
        }
      }
    }
  }
}

这样配置后，`postcss-pxtorem` 将会自动将样式中的 `px` 单位转换为 `rem` 单位，而且会忽略 `element-ui` 的样式。

希望以上信息对你有帮助！如有更多问题，请随时提问。