最近被rem适配这个坑搞了一整天，使用了postcss-pxtorem，不管是放在eject后的webpack里还是网上各种教程介绍的craco里都没有用，估计是更新导致的，在钻研了一天后，终于完成适配了，下面介绍一下适配的步骤(从项目0开始，可自行跳到自己的步骤位置)

以下内容均为本人测试过，非网上转载文章内容

1.运行命令行创建react项目

create-react-app 项目名称

2.终端执行安装数个包

各个包的用途:

        @craco/craco: 使项目不需要 eject暴露配置就可以修改webpack配置

        craco-less：编译less文件需要

        postcss-pxtorem lib-flexible： rem适配相关

yarn add @craco/craco craco-less postcss-pxtorem lib-flexible

3.package.json修改scripts对象内容如下

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
},

4.根目录创建 craco.config.js（与package.json同级）

5.craco.config.js内容如下

ps: 根据设计稿大小尺寸来修改rootValue的值即可

内容解释：使用craco配置webpack可以避免eject暴露webpack，工程更加干净，以下内容主要做了两件事

1.配置less，让工程可以编译less

2.配置rem适配

const CracoLessPlugin = require('craco-less');

module.exports = {
    plugins: [
        {
            plugin: CracoLessPlugin,
            options: {
                lessLoaderOptions: {
                    lessOptions: {
                        javascriptEnabled: true,
                    },
                },
            },
        },
    ],
    style: {
        postcss: {
            mode: 'extends',
            loaderOptions: {
                postcssOptions: {
                    ident: 'postcss',
                    plugins: [
                        [
                            'postcss-pxtorem',
                            {
                                rootValue: 375/10, // 根元素字体大小
                                // propList: ['width', 'height']
                                propList: ['*']
                            },
                        ],
                    ],
                },
            },
        },
    },
};

6.在index.js顶部引入 lib-flexible，下图是index.js的全部代码

import React from 'react';
import ReactDOM from 'react-dom';
import 'lib-flexible'
import App from './App';


ReactDOM.render(
        <App />,
  document.getElementById('root')
);

7.创建less文件并引入查看效果，我这里是login.less被login.jsx引入

 login.less：

ps：还是按照px写的，到页面上会自动适配转为rem

.demo {
  color: white;
  background-color: black;
  width: 375px;
  height: 50px;
  margin: 0 auto;
  margin-top: 15px;
  text-align: center;
}

login.jsx：

import React, {Component} from 'react';
import './login.less'

class Login extends Component {
    render() {
        return (
            <div className={"demo"}>
            </div>
        );
    }
}

export default Login;

页面效果：

 当样式都变成了rem，就完成适配了

哎头疼了一天，希望能帮到你