1. 准备

创建项目

npx create-react-app '项目名称'

安装craco

 npm install  @craco/craco --save
 
 //或者
 yarn add  @craco/craco

craco安装成功之后需要修改package.json的启动命令等

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

创建配置文件 craco.config.js

安装适配的插件postcss-px-to-viewport

兼容postcss88.x
npm install postcss-px-to-viewport-8-plugin 
或者
yarn add postcss-px-to-viewport-8-plugin

2. 配置craco.config.js

const path = require("path");

module.exports = {
  style: {
    postcss: {
      mode: "extends",
      loaderOptions: {
        postcssOptions: {
          ident: "postcss",
          plugins: [
            [
              "postcss-px-to-viewport-8-plugin", // postcss-px-to-viewport安装的时候适配postcss-px-to-viewport-8-plugin
              {
                viewportWidth: 375, // 设计稿的视口宽度
              },
            ],
          ],
        },
      },
    },
  },
  // webpack配置可忽略
  webpack: {
    // 配置别名
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: [
            "sass-loader", // 将Sass编译成CSS
          ],
        },
      ],
    },
  },
};

如果使用的vite创建的项目

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path';

import pxtovw from 'postcss-px-to-viewport-8-plugin'
// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  css: {
    postcss: {
      plugins: [
        pxtovw({
          unitToConvert: "px", // 要转化的单位
          viewportWidth: 750, // UI设计稿的宽度
          // viewportHeight: 1624, //视口的高度，对应的是设计稿的高度（也可以不配置）
          unitPrecision: 6, // 转换后的精度，即小数点位数
          propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
          viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
          fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
          selectorBlackList: ["ignore"], // 指定不转换为视窗单位的类名，
          minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
          mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
          replace: true, // 是否转换后直接更换属性值
          exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
          landscape: false, // 是否处理横屏情况
        })
      ],
    }
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    }
  }
})

运行项目即可查看