预设和插件

• unocss-applet - 主包，包含所有预设和插件。
• @unocss-applet/preset-applet - 默认预设，包裹 @unocss/preset-wind3（默认）/ @unocss/preset-wind4。
• @unocss-applet/preset-rem-rpx - 转换rem <=> rpx的工具。
• @unocss-applet/transformer-attributify - 为小程序启用 Attributify 模式。
• @unocss-applet/transformer-hover - 把 hover: 工具类改写到原生 hover-class 属性。
• @unocss-applet/reset - CSS 样式重置集合。

各 preset / transformer 与上游 UnoCSS 的兼容关系、不支持项及变通方案见 COMPATIBILITY.md。

安装

npm i unocss-applet --save-dev # with npm
yarn add unocss-applet -D # with yarn
pnpm add unocss-applet -D # with pnpm

兼容性

unocss-applet 当前已验证支持 UnoCSS ~66.10.0（peerDependencies 锁定），需要 Node.js >= 22.12。各历史版本与 UnoCSS 的对应关系（如 [email protected] 对应 unocss@~66.7.4 / ~66.7.5）及完整兼容矩阵见 COMPATIBILITY.md。

使用

UnoCSS 配置

import type { Preset, SourceCodeTransformer } from 'unocss'
import { defineConfig, presetAttributify } from 'unocss'

import {
  presetApplet,
  presetRemRpx,
  transformerAttributify,
  transformerHover,
} from 'unocss-applet'

// uni-app
const isApplet = process.env?.UNI_PLATFORM?.startsWith('mp-') ?? false
// taro
// const isApplet = process.env.TARO_ENV !== 'h5'
const presets: Preset[] = []
const transformers: SourceCodeTransformer[] = []

if (isApplet) {
  presets.push(presetApplet())
  presets.push(presetRemRpx())
  transformers.push(transformerAttributify({ ignoreAttributes: ['block'] }))
  transformers.push(transformerHover())
}
else {
  presets.push(presetApplet())
  presets.push(presetRemRpx({ mode: 'rpx2rem' }))
  presets.push(presetAttributify())
}

export default defineConfig({
  presets: [
    // ...
    ...presets,
  ],
  transformers: [
    // ...
    ...transformers,
  ],
})

平台配置

vite.config.ts（UnoCSS v0.58 和更低版本）/ vite.config.mts（UnoCSS v0.59 和更高版本）

// use @uni-helper/plugin-uni support ESM
import Uni from '@uni-helper/plugin-uni'
import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    Uni(),
    UnoCSS() as any,
  ],
})

main.ts

import 'uno.css'

config/index.js（UnoCSS v0.59 和更高版本）

import { createSwcRegister, getModuleDefaultExport } from '@tarojs/helper'

export default async () => {
  createSwcRegister({
    only: [filePath => filePath.includes('@unocss')],
  })
  const UnoCSS = getModuleDefaultExport(await import('@unocss/webpack'))
  return {
    mini: {
      // ...
      webpackChain(chain, _webpack) {
        chain.plugin('unocss').use(UnoCSS())
      }
    },
    h5: {
      // ...
      webpackChain(chain) {
        chain.plugin('unocss').use(UnoCSS())
      }
    }
  }
}

config/index.js（UnoCSS v0.58 和更低版本）

import UnoCSS from '@unocss/webpack'

const config = {
  mini: {
    // ...
    webpackChain(chain, _webpack) {
      chain.plugin('unocss').use(UnoCSS())
    },
  },
  h5: {
    // ...
    webpackChain(chain) {
      chain.plugin('unocss').use(UnoCSS())
    },
  },
}

app.ts

import 'uno.css'

小程序端（weapp 等）与 H5 端均已验证可正常编译并生成工具类（Taro 4.2 + UnoCSS 66.10，Taro Webpack 链路需要 patches/@[email protected]，背景见 COMPATIBILITY.md）。完整可运行示例见仓库内 examples/taro。

示例

仓库内集成示例（均启用了上游 presetIcons）：

• examples/uni-app - uni-app + Vue3 + Vite
• examples/taro - Taro 4.2 + React + Webpack5

社区示例：

• vitesse-uni-app
• wot-starter
• unibest
• uni-vitesse

感谢

• UnoCSS

License

MIT License © 2022-PRESENT Neil Lee 和所有贡献者。