专为 uni-app 打造的 UnoCSS 预设
presetUno
和 presetAttributify
支持!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 unocss@0.58.9 unocss-applet@0.7.8 -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。
true
是否启用 @unocss/preset-uno。对于小程序平台,使用基于 @unocss/preset-uno 分叉而来的 @unocss-applet/preset-applet 以获取更佳支持。
默认启用。要禁用,请传递 false
。
除了传递 boolean 值,你也可以传递 @unocss/preset-uno 以及 @unocss-applet/preset-applet 的选项,具体选项请查看上方提供的文档链接,此时仍视为开启。
true
是否启用 @unocss-applet/preset-rem-rpx。
默认启用,将 rpx 转换成 rem(即 mode: "rpx2rem"
)。要禁用,请传递 false
。
除了传递 boolean 值,你也可以传递 @unocss-applet/preset-rem-rpx 的选项,具体选项请查看上方提供的文档链接,此时仍视为开启。
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>