预设和插件

• 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 配置

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' ?? false
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 端目前会构建失败：@unocss/webpack 的虚拟模块 uno.css 是占位符，本应由插件 processAssets 阶段替换，但 Taro H5 的 style-loader / mini-css-extract-plugin → css-loader → postcss-loader 链会在替换前先把它当 CSS 解析，导致 ModuleParseError。这是 @unocss/webpack 与 Taro Webpack5 H5 端的集成问题，与 unocss-applet 预设本身无关。H5 端如需使用，可改用 @unocss/cli 预生成 uno.css 再 import 的方案。完整可运行示例见仓库内 examples/taro3、examples/taro4。

示例

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

• examples/uni-app - uni-app + Vue3 + Vite
• examples/taro3 - Taro 3.6 + React + Webpack5
• examples/taro4 - Taro 4.2 + React + Webpack5

社区示例：

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

感谢

• UnoCSS

License

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