微信小程序如何使用 unocss

小程序不支持\，:，[， $，.等转义类名以及 attributify mode

可以使用 unocss-preset-weapp 解决

以下配置可以解决

1. 解决小程序不支持 * 选择器
2. rem单位 转 rpx

unocss.config.ts

import { defineConfig, presetUno } from "unocss";

const remRE = /^-?[\.\d]+rem$/

export default defineConfig(
  {
    presets: [
      presetUno(),
    ],
    theme:{
      // 解决小程序不支持 * 选择器
      preflightRoot: ["page,::before,::after"]
    },
    postprocess(util) {
      // rem 转 rpx
      util.entries.forEach((i) => {
        const value = i[1]
        if (value && typeof value === 'string' && remRE.test(value))
          i[1] = `${value.slice(0, -3) * 16 * 2}rpx`
      })
    },
  }
)