前言

unocss默认转换rem的基数是4，但是我们很多时候需要根据设计稿去转换。但是，unocss好像没有给我们提供设置rem转换基数的选项（作者刚开始学习，不太了解）；所以，在查看了issue后，根据@unocss/preset-rem-to-px插件+postprocess配置项写了一个函数去做转换。

实现方式

ps: 这里我用了postcss-pxtorem将px转rem，就不在unocss里的hook做转换了，因为我觉得postcss-pxtorem做转换可以更加灵活。

import { defineConfig } from "unocss";


const remRE = /(-?[\.\d]+)rem/g

export default defineConfig({
  rules: [],
  shortcuts: [
    // ...
  ],
  theme: {
    colors: {
      // ...
    },
  },
  presets: [],
  transformers: [],
  postprocess: [
    (obj) =>{       
      obj.entries.forEach((i) => {
        const value = i[1];
        if (typeof value === 'string' && remRE.test(value)) {
          i[1] = value.replace(remRE, (_, p1) => `${(p1 * 4)}px`)
        }
      })
    }
  ]
});