[ WXSS 文件编译错误] ./app.wxss unexpected "\" at pos 152029

[xinlei3166]

请问这个该怎么处理呢？
写了rule好像没生效呢。

    transformRules: {
        '.': '-dian-',
        '\\': '-xiegang-',
        '\\?': '-wenhao-',
        '?': '-wenhao-',
        '.?': '-wenhao-'
      }

图1：

图2：

[chengazhen]

为什么你这边会有转义符的双反斜杠 \ 呢? 作者默认的rule就可以覆盖到到特殊字符。我这里理解的是，只要规则能够覆盖到 unocss 的特殊字符就可以吧。你现在的问题产生原因在下面

[chengazhen]

https://github.com/MellowCo/unplugin-transform-class/blob/280adc13ae1b633c769d061fc7053cf7c5905780/src/utils.ts#L75 这是相关的处理规则，本质上就是用正则来处理的，如果你用了双反写杠就会被识别出来并且删除掉

[MellowCo]

不需要写 \

可以提供下vue的class代码

[xinlei3166]

@MellowCo

你好，这是项目地址：https://github.com/xinlei3166/vite-uniapp-template

pnpm run dev:mp-weixin ，在微信开发者工具中编译，会出现上面报错。

[xinlei3166]

为什么你这边会有转义符的双反斜杠 \ 呢? 作者默认的rule就可以覆盖到到特殊字符。我这里理解的是，只要规则能够覆盖到 unocss 的特殊字符就可以吧。你现在的问题产生原因在下面

可能是我用的别的ui框架产生的。nutui-uniapp

[MellowCo]

1. 去除 presetUno
   presetUno 不支持小程序，生成的css有问题

import { defineConfig, presetAttributify } from 'unocss'
import presetWeapp from 'unocss-preset-weapp'
import { extractorAttributify, transformerClass } from 'unocss-preset-weapp/transformer'

const { presetWeappAttributify, transformerAttributify } = extractorAttributify()

// https://unocss.dev/interactive/
export default defineConfig({
  presets: [
    // https://github.com/MellowCo/unocss-preset-weapp
    presetWeapp({ platform: 'uniapp', whRpx: false }),
    presetWeappAttributify(),
    presetAttributify({
      prefix: 'un-',
      prefixedOnly: false
    })
  ],
  transformers: [
    // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerAttributify
    transformerAttributify(),
    // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass
    transformerClass()
  ],
  // @ts-ignore opacity: active, disabled
  // rules: [[/^opacity-(active|disabled)$/, ([, d]) => ({ opacity: `var(--van-${d}-opacity)` })]],
  theme: {
    colors: {
      primary: 'var(--nut-primary-color)', // class="bg-primary"
      primaryEnd: 'var(--nut-primary-color-end)', // class="bg-primaryEnd"
      success: 'var(--nut-success-color)',
      danger: 'var(--nut-danger-color)',
      warning: 'var(-nut-warning-color)',
      text: 'var(--nut-title-color)',
      text2: 'var(--nut-title-color2)',
      text3: 'var(--nut-text-color)',
      border: 'var(--nut-border-color)',
      active: 'var(--nut-active-color)',
      help: 'var(--nut-help-color)',
      disable: 'var(--nut-disable-color)',
      required: 'var(--nut-required-color)'
    }
  }
})

[MellowCo]

2. 小程序不支持 *

[xinlei3166]

1. 去除 presetUno
   presetUno 不支持小程序，生成的css有问题

import { defineConfig, presetAttributify } from 'unocss'
import presetWeapp from 'unocss-preset-weapp'
import { extractorAttributify, transformerClass } from 'unocss-preset-weapp/transformer'

const { presetWeappAttributify, transformerAttributify } = extractorAttributify()

// https://unocss.dev/interactive/
export default defineConfig({
  presets: [
    // https://github.com/MellowCo/unocss-preset-weapp
    presetWeapp({ platform: 'uniapp', whRpx: false }),
    presetWeappAttributify(),
    presetAttributify({
      prefix: 'un-',
      prefixedOnly: false
    })
  ],
  transformers: [
    // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerAttributify
    transformerAttributify(),
    // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass
    transformerClass()
  ],
  // @ts-ignore opacity: active, disabled
  // rules: [[/^opacity-(active|disabled)$/, ([, d]) => ({ opacity: `var(--van-${d}-opacity)` })]],
  theme: {
    colors: {
      primary: 'var(--nut-primary-color)', // class="bg-primary"
      primaryEnd: 'var(--nut-primary-color-end)', // class="bg-primaryEnd"
      success: 'var(--nut-success-color)',
      danger: 'var(--nut-danger-color)',
      warning: 'var(-nut-warning-color)',
      text: 'var(--nut-title-color)',
      text2: 'var(--nut-title-color2)',
      text3: 'var(--nut-text-color)',
      border: 'var(--nut-border-color)',
      active: 'var(--nut-active-color)',
      help: 'var(--nut-help-color)',
      disable: 'var(--nut-disable-color)',
      required: 'var(--nut-required-color)'
    }
  }
})

可以了，非常感谢。