react配置rem插件lib-flexible和postcss

方法一：这种方法需要把配置暴露出来，而且和antd-mobile的按需引入有冲突，会报错

1、 计算 js
在index.html中添加以下js

<script>
        !(function(win, doc) {
            function setFontSize() {
                var baseFontSize = 100;
                var baseWidth = 320;
                var clientWidth = document.documentElement.clientWidth ||         window.innerWidth;
                var innerWidth = Math.max(Math.min(clientWidth, 480), 320);
                var rem = 100;
                if (innerWidth > 362 && innerWidth <= 375) {
                    rem = Math.floor(innerWidth / baseWidth * baseFontSize * 0.9);
                }
                if (innerWidth > 375) {
                    rem = Math.floor(innerWidth / baseWidth * baseFontSize * 0.84);
                }
                window.__baseREM = rem;
                document.querySelector('html').style.fontSize = rem + 'px';
            }
            var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
            var timer = null;
            win.addEventListener(evt, function() {
                clearTimeout(timer);
                timer = setTimeout(setFontSize, 300);
            }, false);
            win.addEventListener("pageshow", function(e) {
                if (e.persisted) {
                    clearTimeout(timer);
                    timer = setTimeout(setFontSize, 300);
                }
            }, false);
            setFontSize();
        }(window, document));
    </script>

2、配置webpack.config.js
由于react默认隐藏webpack配置需要手动显示。首先执行命令显示webpack配置

npm run eject//暴露配置
//安装以下包：lib-flexible postcss-px2rem-exclude
npm i lib-flexible postcss-px2rem-exclude --save

修改webpack.config.js ,首先引入,然后找到处理postcss-loader的地方：

const px2rem = require('postcss-px2rem-exclude');
//加入
 px2rem({remUnit:75,exclude: /node_modules/i})

image.png
image.png

3、在我们的入口文件index.js 中引入lib-flexible

import "lib-flexible"

4、最后一步修改index.html

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

注意：
网上有的用的是postcss-px2rem，这样进行移动端适配后 自己写的样式虽然完全没有问题，但是如果使用Ant Design Mobile进行开发的话，蚂蚁金服的样式会出问题导致无法使用。
解决方案：
配置webpack的postcss-px2rem，让它不去检查/node_modules/，也就是不作用antd等引入的库。但是我去设置postcss-px2rem的exclude选项发现并没有起作用，翻博客发现，postcss-px2rem无法设置exclude排除项，然后有个人修改postcss-px2rem的源码，做了一个postcss-px2rem-exclude可以设置排除项(亲测有用)。
参考：https://zhuanlan.zhihu.com/p/148529375

方法二：目前没发现啥bug

1.下载插件

npm i lib-flexible postcss-px2rem-exclude --save

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

2.修改config-overrides.js（如果没有就新建，在项目根目录） 在config-overrides.js文件里重写postcss，加入如下代码
这文件将antd-mobile的配置合并起来了，如果你用了antd-mobile的按需引入，那直接粘贴过去就ok，antd-mobile按需引入参照官网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;
    }
);

参考：https://www.cnblogs.com/beyonds/p/12988329.html
https://blog.csdn.net/yuanqi3131/article/details/108220467