关于如何移除 pxtorem 的配置

• 其实关于项目中添加 pxtorem，这个配置褒贬不一，对于一些特殊项目，比如设计时候以大屏为主的比较适合这样的配置，其他时候其实不见得有这个配置就是好事，毕竟用 4k 屏是为了看更多的内容，而不是更大的字，所以有必要说明一下如何去掉 pxtorem 的配置

React 模板

• 先卸载postcss-pxtorem:npm uninstall postcss-pxtorem
• 删除vite.config.js文件中的关于postcss-pxtorem的配置，删除如下部分的代码

import postCssPxToRem from "postcss-pxtorem"

postCssPxToRem({
  rootValue: 16, // 1rem的大小
  propList: ["*"], // 需要转换的属性，这里选择全部都进行转换
  selectorBlackList: ["#root"],
})

• 删除/src/common/common-const.js文件
• 删除/src/plugins/plugin-set-rem.js文件，以及删除/src/plugins/plugin-jss.js文件中的如下配置代码：

import { BASE_FONT_SIZE } from "../common/common-const"

const pxToRem = (value, defaultValue) => {
  const parsedValue = parseInt(value, 10)

  if (Number.isNaN(parsedValue)) {
    return defaultValue || value
  }

  return `${parsedValue / BASE_FONT_SIZE}rem`
}

const pxToRemPlugin = {
  onProcessStyle: (style, rule) => {
    if (!rule || !rule.options) {
      return style
    }

    const processedStyle = {}

    for (const property in style) {
      const value = style[property]

      if (typeof value === "string" && value.includes("px")) {
        processedStyle[property] = value.replace(/(\d+)px/g, (match, p1) => {
          return pxToRem(p1, match)
        })
      } else {
        processedStyle[property] = value
      }
    }

    return processedStyle
  },
}

jss.use(pxToRemPlugin)

• 删除/src/App.jsx中的如下配置代码：

import { setHtmlRem } from "./plugins/plugin-set-rem"
import { StyleProvider, px2remTransformer } from "@ant-design/cssinjs"

const [px2rem, setPx2rem] = useState(
  px2remTransformer({
    rootValue: 16,
  })
)

const handleSetRem = () => {
  setHtmlRem()
  setPx2rem(px2remTransformer({ rootValue: document.documentElement.style.fontSize.replace("px", "") }))
}

useEffect(() => {
  handleSetRem()

  const resizeFun = window.addEventListener("resize", handleSetRem)

  return () => {
    window.removeEventListener("resize", resizeFun)
  }
}, [])

// 删除StyleProvider标签，并保留{pages}
<StyleProvider transformers={[px2rem]}>{pages}</StyleProvider>

Vue3 模板

• 先卸载postcss-pxtorem:npm uninstall postcss-pxtorem
• 删除vite.config.js文件中的关于postcss-pxtorem的配置，删除如下部分的代码

import postCssPxToRem from "postcss-pxtorem"

postCssPxToRem({
  rootValue: 16, // 1rem的大小
  propList: ["*"], // 需要转换的属性，这里选择全部都进行转换
  selectorBlackList: ["#root"],
})

• 删除/src/plugins/plugin-set-rem.js文件
• 删除/scr/main.js文件中的如下配置代码：

import "./plugins/plugins-set-rem"

• 删除/src/common/common-const.js文件