【react】create-react-app配置px2rem

一、自适应

1. 自定义webpack，运行该命令，会把webpack的配置文件暴露出来（如果前期没有暴露的话，否则直接第二步）

npm run eject

2. 安装lib-flexible、px2rem，这里安装postcss-px2rem-exclude，postcss-px2rem-exclude中包含了px2rem

npm i lib-flexible postcss-px2rem-exclude postcss postcss-loader postcss-preset-env postcss-flexbugs-fixes -s

3. 配置config/webpack.config.js，在config目录下找到webpack.config.js文件，加入

const px2rem = require('postcss-px2rem-exclude');

 然后再下面代码中加入下面这行

px2rem({
    remUnit:75,exclude: /node_modules/i}), // 设计图为750，并且排除node_modules目录不让此目录下转化为rem

4. src目录下找到index入口文件，index.js文件，如果是typescript目录则为index.tsx文件，在文件上面加入

import 'lib-flexible'; 

5. 找到public/index.html文件，加入如下代码：

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

6. 重新运行项目，一般就可以看到px转rem了。

 二、px2rem无效

如果你使用了antd-mobile这个UI库,按照上面的步骤搞了，发现px根本没有转换成rem，解决px2rem无效的问题，然后我又按照antd-mobile的官网的方式按需引入，官方文档传送门
,在根目录下新建了一个config-overrides.js的文件

解决方法：在config-overrides.js文件里重写postcss，加入如下代码

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: 75,
          exclude: /node-modules/i,
        }),
      ],
    });

    return config;
  }
);