(移动端适配px转rem)react配置rem插件lib-flexible和postcss-px2rem-exclude (移动端适配px转rem)react配置r

【(移动端适配px转rem)react配置rem插件lib-flexible和postcss-px2rem-exclude】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; } );