Skip to content

uni-helper/unocss-preset-uni

Repository files navigation

@uni-helper/unocss-uni

专为 uni-app 打造的 UnoCSS 预设

npm version npm downloads bundle License

特性

  • ⚡️ 几乎零配置启动
  • 👍 内置 Attributify 支持!
  • ⚙️ 随时停用或自定义预设的配置
  • 🦾 按平台编写样式!

使用

安装

pnpm add @uni-helper/unocss-uni

配置

// uno.config.ts
// 使用这个库导出的 `defineConfig`
import { defineConfig, presetUni } from '@uni-helper/unocss-uni'

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

示例

按平台编写

<div class='uni-h5:mx-auto'></div>
<div class='uni-app:mx-auto'></div>
<div class='uni-mp:mx-auto'></div>
<div class='uni-weixin:mx-auto'></div>
<div class='uni-mp-alipay:mx-auto'></div>
...

你还可以使用 uno.config 的 theme 来自定义平台匹配规则:

export default defineConfig({
  theme: {
    platforms: {
      'wechat': 'mp-weixin', // alias 到 mp-weixin
      'my-app': 'my-app', // 自定义平台
    }
  }
})
<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'
}

感谢