react 配置 rem(px转rem适配手机端)

1、 计算 js

在index.html中添加以下js


2、配置webpack.config.js

由于react默认隐藏webpack配置需要手动显示。首先执行命令显示webpack配置

npm run eject
//Are you sure you want to eject? This action is permanent. (y/N) 
y
安装以下包:lib-flexible sass-loader node-sass postcss-px2rem-exclude 

npm i lib-flexible sass-loader node-sass postcss-px2rem-exclude   --save

修改webpack.config.js ,首先引入:

const px2rem = require('postcss-px2rem-exclude');
//加入
 px2rem({remUnit:75,exclude: /node_modules/i})

然后找到处理postcss-loader的地方:
react 配置 rem(px转rem适配手机端)_第1张图片
在我们的入口文件index.js 中引入lib-flexible

import "lib-flexible"

最后一步修改index.html


配置完毕执行:

npm  install 
npm  start 

你可能感兴趣的:(ReactNative)