移动端的React项目中如何配置自适应和px转rem

本文主要是介绍移动端的React项目中如何配置自适应和px转rem，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

创建项目

create-react-app project-name

启动项目

npm start

下载自适应和px转rem的插件

自适应的：    npm install lib-flexible --save

px转rem的：npm install postcss-pxtorem@5.1.1 --save-dev

创建craco.config.js配置文件

在package.json中配置craco

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

在craco.config.js文件中配置 postcss-pxtorem

const path = require('path')module.exports = {// 配置@符号的webpack: {alias: {'@': path.join(__dirname, 'src')}},style: {// 配置postcss-pxtorempostcss: {mode: 'extends',loaderOptions: {postcssOptions: {ident: 'postcss',plugins: [['postcss-pxtorem',{rootValue: 375 / 10, // 根元素字体大小// propList: ['width', 'height']propList: ['*']},],],},},},},
}

这篇关于移动端的React项目中如何配置自适应和px转rem的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---