移动端的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-pxtorem
postcss: {
mode: 'extends',
loaderOptions: {
postcssOptions: {
ident: 'postcss',
plugins: [
[
'postcss-pxtorem',
{
rootValue: 375 / 10, // 根元素字体大小
// propList: ['width', 'height']
propList: ['*']
},
],
],
},
},
},
},
}
原文地址:https://blog.csdn.net/xxq_0217/article/details/136393977
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!