react-配置-移动端vw

1. 安装 px 转 vw 的包：npm i -D postcss-px-to-viewport
   • 包的作用：将 px 转化为 vw，所以有了该工具，只需要在代码中写 px 即可
2. 在 craco.config.js 添加相应配置
3. 重启项目，让配置生效

craco.config.js

const pxToViewport = require('postcss-px-to-viewport')
const vw = pxToViewport({
  // 视口宽度，一般就是 375（ 设计稿一般采用二倍稿，宽度为 375 ）
  viewportWidth: 375
})

module.exports = {
  // 此处省略 webpack 配置
  webpack: {},

  // 这里补充style配置
  style: {
    // postcss: {
    //  plugins: [vw]
    // },
    // postcss8的新写法
    postcss: {
      mode: 'extends',
      loaderOptions: {
        postcssOptions: {
          ident: 'postcss',
          plugins:[vw]
        }
      }
    }
  }
}

如无效则推荐版本："react-scripts": "^4.0.3", "@craco/craco": "^6.4.2"