@uni-helper/unocss-preset-uni
v0.2.9
Published
专为 uni-app 打造的 UnoCSS 预设
Downloads
1,618
Readme
@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()
]
})
示例
用法与 UnoCSS 官方提供的 presetUno
一致,请参考 文档。
按平台编写
开箱即用的平台支持,允许你按平台编写相应样式。
<!-- 只在 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 提供按平台编写灵感