react配置移动端适配

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"