@uni-helper/unocss-preset-uni

专为 uni-app 打造的 UnoCSS 预设

特性

• 🥰 适配 uni-app 所有支持平台！
• 🚀 几乎零配置启动！
• ⚡️ 内置 presetUno 和 presetAttributify 支持！
• ⚙️ 随时停用或自定义预设的配置
• 🦾 按平台编写样式！
• 👻 Windows 用户？告别烦人的崩溃！#3603

使用

UnoCSS 从 v0.59 开始只提供 ESM 支持，相关信息请参考 Pure ESM package。

安装

pnpm add @uni-helper/unocss-preset-uni -D

# unocss v0.59 或以上
pnpm add unocss unocss-applet -D

# unocss v0.58
pnpm add [email protected] [email protected] -D

配置

// vite.config.ts，支持 HBuilderX
import { defineConfig } from 'vite'
import Uni from '@dcloudio/vite-plugin-uni'

export default async () => {
  const UnoCSS = (await import('unocss/vite')).default

  return defineConfig({
    plugins: [
      Uni(),
      UnoCSS()
    ]
  })
}

// vite.config.mts，不支持 HBuilderX
import { defineConfig } from 'vite'
import uniModule from '@dcloudio/vite-plugin-uni'
import UnoCSS from 'unocss/vite'

// @ts-expect-error missing types
const Uni = uniModule.default || uniModule

export default defineConfig({
  plugins: [
    Uni(),
    UnoCSS()
  ]
})

// uno.config.ts，支持 HBuilderX
import { defineConfig } from 'unocss'
import { presetUni } from '@uni-helper/unocss-preset-uni'

export default defineConfig({
  presets: [
    presetUni()
  ]
})

完整配置示例可参考 uni-helper/vitesse-uni-app。

选项

uno

• 默认值：true

是否启用 @unocss/preset-uno。对于小程序平台，使用基于 @unocss/preset-uno 分叉而来的 @unocss-applet/preset-applet 以获取更佳支持。

默认启用。要禁用，请传递 false。

除了传递 boolean 值，你也可以传递 @unocss/preset-uno 以及 @unocss-applet/preset-applet 的选项，具体选项请查看上方提供的文档链接，此时仍视为开启。

remRpx

• 默认值：true

是否启用 @unocss-applet/preset-rem-rpx。

默认启用，将 rpx 转换成 rem（即 mode: "rpx2rem"）。要禁用，请传递 false。

除了传递 boolean 值，你也可以传递 @unocss-applet/preset-rem-rpx 的选项，具体选项请查看上方提供的文档链接，此时仍视为开启。

attributify

• 默认值：true

是否启用 @unocss/preset-attributify。对于小程序平台，还会自动启用 @unocss-applet/transformer-attributify 以获取更佳支持。

默认启用，匹配属性，忽略 block 和 fixed。要禁用，请传递 false。

除了传递 boolean 值，你也可以传递 @unocss/preset-attributify 的选项，具体选项请查看上方提供的文档链接，此时仍视为开启。

注意：部分情况下组件库的属性命名可能会与此模式冲突，如果出现样式无效的情况，请尝试关闭此选项，或者设置 prefixedOnly 选项值为 true，只扫描前缀匹配的属性。

import { defineConfig } from 'unocss'
import { isMp } from '@uni-helper/uni-env'
import { presetUni } from '@uni-helper/unocss-preset-uni'

export default defineConfig({
  presets: [
    presetUni({
      attributify: {
        prefixedOnly: true,
      }
    })
  ]
})

示例

默认地，用法与 @unocss/preset-uno 一致，额外支持以下功能。

按平台编写

开箱即用的平台支持，允许你按平台编写相应样式。

<!-- 只在 H5 编译出 mx-auto 类 -->
<div class='uni-h5:mx-auto'></div>

<!-- 只在 APP 编译出 mx-auto 类 -->
<div class='uni-app:mx-auto'></div>

<!-- 只在小程序编译出 mx-auto 类 -->
<div class='uni-mp:mx-auto'></div>

<!-- 只在微信小程序编译出 mx-auto 类，类名也可以写成 uni-mp-weixin:mx-auto -->
<div class='uni-weixin:mx-auto'></div>

<!-- 只在支付宝小程序编译出 mx-auto 类，类名也可以写成 uni-alipay:mx-auto -->
<div class='uni-mp-alipay:mx-auto'></div>
...

你也可以通过自定义 theme.platforms 来自定义平台匹配规则:

// uno.config.ts
import { defineConfig } from 'unocss'
import { presetUni } from '@uni-helper/unocss-preset-uni'

export default defineConfig({
  presets: [
    presetUni()
  ],
  theme: {
    platforms: {
      'wechat': 'mp-weixin', // 支持 uni-wechat，等同于 uni-mp-weixin
      'my-app': 'my-app', // 自定义平台，支持 uni-my-app
    }
  }
})

<!-- 注意：你不能省略 uni- 的类名前缀 -->
<div class='uni-wechat:mx-auto'></div>
<div class='uni-my-app:mx-auto'></div>

点击展开查看内置的平台匹配规则

platforms = {
  '360': 'mp-360',
  'mp': 'mp',
  'app': 'app',
  'quickapp': 'quickapp',
  'app-plus': 'app-plus',
  'h5': 'h5',
  'mp-360': 'mp-360',
  'mp-alipay': 'mp-alipay',
  'alipay': 'mp-alipay',
  'mp-baidu': 'mp-baidu',
  'baidu': 'mp-baidu',
  'mp-jd': 'mp-jd',
  'jd': 'mp-jd',
  'mp-kuaishou': 'mp-kuaishou',
  'kuaishou': 'mp-kuaishou',
  'mp-lark': 'mp-lark',
  'lark': 'mp-lark',
  'mp-qq': 'mp-qq',
  'qq': 'mp-qq',
  'mp-toutiao': 'mp-toutiao',
  'toutiao': 'mp-toutiao',
  'mp-weixin': 'mp-weixin',
  'weixin': 'mp-weixin',
  'quickapp-webview': 'quickapp-webview',
  'quickapp-webview-huawei': 'quickapp-webview-huawei',
  'quickapp-webview-union': 'quickapp-webview-union'
}

感谢

• unocss 提供大部分函数
• unocss-applet 提供小程序支持
• uni-unocss 提供按平台编写灵感