1、npm run eject 暴露配置文件
由于react默认隐藏webpack配置需要手动显示。首先执行命令显示webpack配置
执行命令:npm run eject 将config文件夹显示出来
!如果运行npm run eject报错,出错的原因应该是仓库里面代码没有提交,如下提交一下
git add .
git commit -m '自定义名'
npm run eject
2、安装依赖
npm i lib-flexible --save
npm i postcss-px2rem --save
3、 引入
在项目入口文件index.js引入lib-flexible
import 'lib-flexible';
4、修改webpack.config.js
先引入:
const pxtorem = require('postcss-pxtorem')
5、 然后找到搜索 postcss-loader ,复制下面代码替换整个花 括号
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
postcssNormalize(),
// 新增加---------------------------------------------
pxtorem({
rootValue: 37.5,
propWhiteList: [],
minPixelValue: 2,
exclude: /node_modules/i
})
//--------------------------------------------------
],
sourceMap: isEnvProduction && shouldUseSourceMap,
},
},
6、重启项目
npm start
7、报错解决
如果报错:Error: Cannot find module 'postcss-pxtorem'
因为postcss-pxtorem
最高也才6.0.0版本(就2021年5月31日来说是6.0.0,往后就不知道了),只需下载指定5.1.1版本的postcss-pxtorem
就行了
npm install postcss-pxtorem@5.1.1 --save-dev
8、再次重启项目,报错解决
npm start
9、到这里其实还会遇到一个bug,就是元素转换的rem对了,但是展示的效果却不一样,这是因为我们没有设置根标签默认的字体大小,这里有一个根据不同设备会设置根标签的默认字体大小,只要引进你的react入口文件就好了
(function flexible (window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
// adjust body font size
function setBodyFontSize () {
if (document.body) {
document.body.style.fontSize = '16px'
} else {
/*
DOMContentLoaded DOM元素加载完成就触发
load 页面所有资源加载触发
*/
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 100
function setRemUnit () {
var rem = docEl.clientWidth / 100
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))