React 配置px转rem

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))

10、完---