postcss-pxtorem 兼容element-plus 和vant 怎么配置

要让 `postcss-pxtorem` 兼容 `element-plus` 和 `vant`，可以按照以下步骤进行配置：

1. 安装 `postcss-pxtorem` 和 `lib-flexible`：

npm install postcss-pxtorem lib-flexible -D

2. 在项目根目录下创建 `postcss.config.js` 文件，并添加以下内容：

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5, // 设计稿宽度的 1/10，比如设计稿是 750px，这里就是 75
      propList: ['*'],
      selectorBlackList: ['.ignore', '.hairlines'],
    },
    'postcss-flexible': {
      remUnit: 75, // 设计稿宽度，与上面的 rootValue 相等
    },
  },
};

3. 在 `main.js` 中引入 `lib-flexible`：

import 'lib-flexible/flexible';

4. 在 `babel.config.js` 中添加 `vant` 的按需引入：

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      'import',
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        style: true,
      },
      'vant',
    ],
  ],
};

5. 在 `vue.config.js` 中添加 `postcss` 配置：

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue: 37.5,
            propList: ['*'],
            selectorBlackList: ['.ignore', '.hairlines'],
          }),
          require('postcss-flexible')({
            remUnit: 75,
          }),
        ],
      },
    },
  },
};

这样就可以同时兼容 `element-plus` 和 `vant`，并且自动将 `px` 转换为 `rem` 单位了。