配置transformerClass后无法使用行内的important的功能

tangerball commented 1 month ago

import { presetUno } from 'unocss'
import { transformerClass } from 'unocss-preset-weapp/transformer'

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

export default {
  theme: {
    // 解决小程序不支持 * 选择器
    preflightRoot: ['page,::before,::after'],
  },
  presets: [presetUno()],
  transformers: [
    // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass
    transformerClass(),
  ],
  postprocess(util) {
    // 自定义rem 转 rpx
    util.entries.forEach((i) => {
      const value = i[1]
      if (value && typeof value === 'string' && remRE.test(value)) {
        if (process.env.UNI_PLATFORM === 'h5') {
          i[1] = `${value.slice(0, -3) * 2}px`
        } else {
          i[1] = `${value.slice(0, -3) * 4}rpx`
        }
      }
    })
  },
}

没有使用presetWeapp的原因是想自定义转换 rem 转 px 的比例数，例如原本的 pb-10 = padding-bottom: 45px，我需要的是pb-10 = padding-bottom: 5px；如果使用presetWeapp预设后是不能够覆盖你的转换比例，所以在此案例中未使用presetWeapp预设，单独使用transformerClass转换功能。但是出现以下情况行内 pb-10! 后无法在全局样式中发现此类名，移除transformerClass后可行

MellowCo commented 1 month ago

https://unocss.dev/config/rules

看下 unocss 文档

tangerball commented 1 month ago

https://unocss.dev/config/rules

看下 unocss 文档

一个个去列出属性太麻烦了，所以是通过postprocess来转

MellowCo commented 1 month ago

最好提供一个 demo

MellowCo / unocss-preset-weapp

配置transformerClass后无法使用行内的important的功能 #149