(mobile terminal adaptation px to rem) react configure rem plugin lib-flexible and postcss-px2rem-exclude

1. Install the plugin

yarn add lib-flexible postcss-px2rem-exclude

//这个插件也要下，不然的话启动项目的时候会报错
yarn add react-app-rewire-postcss

2. Modify config-overrides.js (if not, create a new one, in the project root directory) Rewrite postcss in the config-overrides.js file, add the following code
This file merges the configuration of antd-mobile. If you use the on-demand import of antd-mobile, it is ok to paste it directly. For on-demand import of antd-mobile, please refer to the official website https://mobile.ant.design/ docs/react/use-with-create-react-app-cn

const {
    override,
    fixBabelImports,
    addWebpackAlias,
    addDecoratorsLegacy,
} = require("customize-cra");
const path = require("path");
const rewirePostcss = require("react-app-rewire-postcss");
const px2rem = require("postcss-px2rem-exclude");
module.exports = override(
    fixBabelImports("import", {
        libraryName: "antd-mobile",
        style: "css",
    }),
    addWebpackAlias({
        "@": path.resolve(__dirname, "src"),
    }),
    addDecoratorsLegacy(),
    (config, env) => {
        // 重写postcss
        rewirePostcss(config, {
            plugins: () => [
                require("postcss-flexbugs-fixes"),
                require("postcss-preset-env")({
                    autoprefixer: {
                        flexbox: "no-2009",
                    },
                    stage: 3,
                }),
                //关键:设置px2rem
                px2rem({
                    remUnit: 37.5,//这里最开始写的是75，但是antd的样式变的可小，查询后看人家设置的是37.5，然后试了下确实好了
                    exclude: /node-modules/i,
                }),
            ],
        });

        return config;
    }
);

3. Introduce lib-flexible
import "lib-flexible"

4. The last step is to modify index.html

<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />