react使用插件配置px转换为rem

react使用插件postcss-pxtorem配置px自动转换rem

1.下载postcss-pxtorem插件

npm install postcss postcss-pxtorem --save-dev

2.下载craco ，进行webpack的配置(ant design中的),或者在webpack.config.js中，这里的话我使用antd的craco插件

npm install @craco/craco

3.在项目根目录创建一个craco.config.js进行配置

const pxtorem = require("postcss-pxtorem");
//https://github.com/cuth/postcss-pxtorem,参考地址
module.exports = {
  style: {
    postcss: {
      plugins: [
        pxtorem({
          rootValue: 3.75, // 设计稿宽度/100，即分成多少份
          unitPrecision: 5, // 小数精度
          propList: [
            "font",
            "font-size",
            "line-height",
            "letter-spacing",
            "width",
            "height",
          ],
          selectorBlackList: [],
          replace: true,
          mediaQuery: false,
          minPixelValue: 0,
          exclude: /node_modules/i,
        }),
      ],
    },
  },
};

4.如果报错：Error: PostCSS plugin postcss-pxtorem requires PostCSS 8,因为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

5.到这里其实还会遇到一个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))

如上步骤进行配置就不用自己对px进行rem转换了，按照设计稿来就ok了