关于react.js:移动端适配px转remreact配置rem插件libflexible和postcsspx2remexclude

1、装置插件

yarn add lib-flexible postcss-px2rem-exclude

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

2、批改 config-overrides.js（如果没有就新建，在我的项目根目录）在 config-overrides.js 文件里重写 postcss，退出如下代码
这文件将 antd-mobile 的配置合并起来了，如果你用了 antd-mobile 的按需引入，那间接粘贴过来就 ok，antd-mobile 按需引入参照官网 https://mobile.ant.design/doc…

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