在react中引入Ant Design Mobile后导致px转rem失效问题及配置文件别名失效问题的解决办法

本文链接：https://blog.youkuaiyun.com/Time_Flies_lei/article/details/116302685

第一步：Ant Design Mobile中文文档

第二步：

npm install react-app-rewired customize-cra --save-dev

第三步：打开 package.json ，找见scripts 直接全部替换

/* package.json */
"scripts": {
   "start": "react-app-rewired start",
   "build": "react-app-rewired build",
   "test": "react-app-rewired test --env=jsdom",
}

第四步：然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。

直接粘贴就可以

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;
    }
);

第五部：现在安装代码可能你看不懂，我也是根据提示，替大家踩坑了，大家可以直接下载