解决react项目引入antd-mobile导致postcss配置px转rem失效问题

今天使用了一下antd-mobile发现我之前配置的postcss失效了，防止下次踩坑记录一下解决方案
解决方案：在config-overrides.js文件里重写postcss，加入如下代码
npm下载以下模块

npm i react-app-rewire-postcss postcss-px2rem-exclude -S

const {
     
  override,
  fixBabelImports,
  addWebpackAlias,
  addDecoratorsLegacy,
} = require("customize-cra");
const path = require("path");
const rewirePostcss = require("react-app-rewire-postcss");
module.exports = override(
  // 配置按需加载
  fixBabelImports("import", {
     
    libraryName: "antd-mobile",
    style: "css",
  }),
  // 配置文件别名
  addWebpackAlias({
     
    "@": path.resolve(__dirname, "src"),
    "@scss": path.resolve(__dirname, "src/assets/scss"),
    "@images": path.resolve(__dirname, "src/assets/images"),
    "@views": path.resolve(__dirname, "src/views"),
    "@network": path.resolve(__dirname, "src/network"),
    "@store": path.resolve(__dirname, "src/store"),
    "@components": path.resolve(__dirname, "src/components"),
  }),
  addDecoratorsLegacy(),
  (config, env) => {
     
    // 重写postcss
    rewirePostcss(config, {
     
      plugins: () => [
        require("postcss-flexbugs-fixes"),
        require("postcss-preset-env")({
     
          autoprefixer: {
     
            flexbox: "no-2009",
          },
          stage: 3,
        }),
        require("postcss-px2rem-exclude")({
     
          // 设计稿宽度/10
          remUnit: 1080 / 10,
          exclude: /node-modules/i,
        }),
      ],
    });
    return config;
  }
);