unocss-wechat

原生小程序，unocss示例

相关链接

• UnoCSS - 即时按需原子CSS引擎
• unocss-preset-weapp - unocss小程序预设

设置 unocss 预设

两种方法任选一种

方法一： 使用通用配置

此方法使用 unocss 内置预设，通过以下配置解决

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

1. 小程序中使用npm，安装 unocss

sh
 体验AI代码助手
 代码解读
复制代码
npm -D unocss

2. unocss.config

js
 体验AI代码助手
 代码解读
复制代码
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`
      })
    },
  }
)

方法二：使用 unocss-preset-weapp 预设

unocss-preset-weapp 内部已经解决小程序不兼容的相关问题

由于小程序不支持 \ \: \[ \$ \. 等转义类名

1. 使用 hex 代替 # , _ 代替 : /

   • 例如 bg-#81ecec/50 可以使用 bg-hex-81ecec_50 表示

2. 针对 hover: 和 avtive:, 可以设置 separators 指定分隔符

   • 例如设置 separators 为 __，hover:bg-red-500 可以使用 hover__bg-red-500 表示

小程序中使用npm，安装 unocss unocss-preset-weapp

shell
 体验AI代码助手
 代码解读
复制代码
npm -D unocss unocss-preset-weapp

2. unocss.config

js
 体验AI代码助手
 代码解读
复制代码
import { defineConfig } from "unocss";
import presetWeapp from ''unocss-preset-weapp''

const include = [/\.wxml$/]

export default defineConfig({
    content:{
        pipeline:{
          include
        }
    },
    presets: [
      presetWeapp(),
    ],
    separators:''__''
})

生成wxss文件

在package.json，设置 script

使用 @unocss/cli 监听文件内容，参考文档

json
 体验AI代码助手
 代码解读
复制代码
{
  "scripts": {
     "unocss": "unocss pages/**/*.wxml -c unocss.config.js --watch -o unocss.wxss",
     "unocss:build": "unocss pages/**/*.wxml -c unocss.config.js -o  unocss.wxss"
  }
}

4. 运行 npm run unocss

wxml 内容变化，触发生成新的 unocss.wxss

5. 导入 unocss.wxss

在 app.wxss 导入生成的 unocss.wxss

css
 体验AI代码助手
 代码解读
复制代码
/**app.wxss**/
@import "./unocss.wxss";

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 200rpx 0;
  height: 100%;
}

unocss插件

• vscode settings.json

json
 体验AI代码助手
 代码解读
复制代码
  // 文件类型
"files.associations": {
  "*.wxml": "html",
},

使用 transformer

transformer 可以将 小程序不支持 \\ \\: \\[ \\$ \\. 等转义类名，根据规则替换

原生小程序使用 transformer 会改变原文件，不推荐使用

• unocss.confit.js

添加 transformerClass，设置转换 wxml 文件

js
 体验AI代码助手
 代码解读
复制代码
import { defineConfig } from "unocss";
import presetWeapp from ''unocss-preset-weapp''
import { transformerClass } from ''unocss-preset-weapp/transformer'';

const include = [/\.wxml$/]

export default defineConfig({
  content:{
    pipeline:{
      include
    }
  },
  presets: [
    presetWeapp(),
  ],
  
  transformers:[
    transformerClass({
      include,
      classTags: false
    })
  ]
})