在小程序(UniApp 和 Taro)中使用UnoCSS，兼容不支持的语法。
- 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建议始终使用 Node.js 最新的 LTS 版本。
unocss-applet 当前已验证支持 UnoCSS ~66.10.0（peerDependencies 锁定），需要 Node.js >= 22.12（原因见 COMPATIBILITY.md）。各 preset / transformer 与上游的兼容关系、不支持项及变通方案详见 COMPATIBILITY.md。
各版本对应关系如下（依据各 git tag 与 npm 发布的 peerDependencies / engines）：
| unocss-applet | unocss | Node.js | 备注 |
|---|---|---|---|
0.14.0 |
~66.8.1 |
>=22.12 |
本包 engines.node 声明；运行时依赖 magic-string 升级至 1.x（仅 ESM），Taro Webpack 等 CJS 加载链依赖 Node 22.12+ 默认启用的 require(esm)。 |
0.13.8 |
~66.7.5 |
未声明 | 0.14.0 前未声明 engines；自身依赖 magic-string@0.30.x（CJS + ESM 双格式），发布基于 Node 22 LTS。 |
0.13.0 – 0.13.7 |
~66.7.4 |
未声明 | 同上；0.13.0 起 peerDependencies 从 >=66.0.0 收紧为 ~66.7.4，上游发布包自 66.7.0 起也不再声明 engines。 |
0.12.2 |
>=66.0.0 |
>=14（上游声明） |
0.12.x 唯一发布版，实际开发/测试基于 66.4。 |
0.10.0 – 0.11.0 |
>=66.0.0 |
>=14（上游声明） |
实际开发/测试基于 66.0。 |
0.8.3 – 0.9.0 |
>=0.62 |
>=14（上游声明） |
发布环境 Node 18。 |
0.8.0 – 0.8.2 |
>=0.59 |
>=14（上游声明） |
|
< 0.8.0 |
— | — | 未声明 peerDependencies.unocss。 |
0.12.x 及更早版本允许的 >=66.0.0 / >=0.62 是宽松下限，未逐一验证上限；如遇生成异常，请优先按上表对齐 UnoCSS 版本。
uno.config.ts
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,
],
})UniApp + Vue3 + Vite
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'Taro v3.6 / v4 + React + Webpack5
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/@unocss__webpack@66.10.0.patch，背景见COMPATIBILITY.md）。完整可运行示例见仓库内examples/taro。
仓库内集成示例（均启用了上游 presetIcons）：
examples/uni-app- uni-app + Vue3 + Viteexamples/taro- Taro 4.2 + React + Webpack5
社区示例：
MIT License © 2022-PRESENT Neil Lee 和所有贡献者。