更新记录

0.0.2（2026-02-13） 下载此版本

新增

0.0.1（2026-02-13） 下载此版本

新增

平台兼容性

uni-app(4.87)

uni-app x(4.87)

lime-unocss-preset

UnoCSS preset for uni-app，支持 uni-app 和 uni-app x。

特性

• 🎨 支持 uni-app 和 uni-app x 全平台
• 📱 支持小程序、App、H5 等所有 uni-app 平台
• 🔄 支持平台条件样式（如 uni-weixin:、uni-h5:）
• 🎯 支持排除平台（如 uni-not-weixin:）
• 💾 支持内联样式模式（解决 APP 端样式热更新问题）
• 📝 支持将生成的 CSS 输出到文件（用于调试）

安装

安装依赖

npm install unocss

导入插件

在 uni-app 插件市场中搜索并导入 lime-unocss-preset。

使用

本配置基于 HBuilderX 开发环境。

目录结构

配置完成后，项目目录结构如下：

your-project/
├── vite.config.ts          # Vite 配置文件
├── uno.config.ts           # UnoCSS 配置文件
├── main.ts / main.uts       # 入口文件
├── pages/                  # 页面目录
│   └── index.uvue
├── App.uvue                # 应用入口组件
└── package.json

Vite 插件配置

在 vite.config.ts 中配置 UnoCSS 插件：

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()
        ]
    })
}

引入样式

在 main.ts 或 main.uts 中引入 UnoCSS 样式：

import 'virtual:uno.css'

UnoCSS 配置

在项目根目录创建 uno.config.ts 文件：

import { defineConfig } from 'unocss'
import { presetUnix } from './uni_modules/lime-unocss-preset'

export default defineConfig({
    content: {
        pipeline: {
            include: [
                /\.(uvue|vue)($|\?)/ // 包含 .vue 和 .uvue 文件
            ],
            exclude: [
                /node_modules/, // 排除 node_modules
                /dist/, // 排除 dist 目录
                /uni_modules/, // 排除 uni_modules
                /components/ // 排除 components 目录
            ]
        }
    },
    presets: [
        presetUnix({
            replaceOpacityVar: true // 将 var(--un-*-opacity) 替换为具体数值
        })
    ]
})

配置选项

uno

• 类型: boolean | PresetAppletOptions
• 默认值: true

是否启用 @unocss/preset-uno。默认启用，传递 false 可禁用。也可以传递配置对象来自定义预设选项。

presetUnix({
    uno: {
        dark: 'media'
    }
})

replaceOpacityVar

• 类型: boolean
• 默认值: true

是否将 var(--un-*-opacity) 替换为具体数值。

presetUnix({
    replaceOpacityVar: true
})

remRpx

• 类型: boolean | RemRpxOptions
• 默认值: { mode: 'rpx2rem' }（除了小程序平台）

开关/配置 presetRemRpx。

presetUnix({
    remRpx: { mode: 'rpx2rem' }
})

attributify

• 类型: boolean | PresetAttributifyOptions & TransformerAttributifyOptions
• 默认值: true

开关/配置 presetAttributify。小程序平台将自动使用 transformerAttributify。

presetUnix({
    attributify: {
        ignoreAttributes: ['block', 'fixed'],
        prefixedOnly: true
    }
})

注意：prefixedOnly: true 可以避免与组件原生属性冲突，推荐开启。

outFile

• 类型: string
• 默认值: undefined

指定生成的 CSS 文件的输出路径。配置后，UnoCSS 会将生成的 CSS 实时写入到指定文件。

presetUnix({
    outFile: './unocss.css'
})

注意：仅在开发模式下生效，用于调试和查看生成的 CSS。

inlineStyle

• 类型: boolean
• 默认值: true

是否使用内联样式模式。开启后，会将生成的 CSS 直接内联到组件的 <style> 标签中。

presetUnix({
    inlineStyle: false
})

注意：仅在 APP 端生效，用于解决 APP 端无法实时更新样式的问题。

平台条件样式

包含平台

<!-- 只在微信小程序生效 -->
<view class="uni-weixin:text-red">微信小程序红色文字</view>

<!-- 只在 H5 生效 -->
<view class="uni-h5:bg-blue">H5 蓝色背景</view>

<!-- 只在 AppX 生效 -->
<view class="uni-appx:p-4">AppX 内边距</view>

排除平台

<!-- 在除微信小程序外的所有平台生效 -->
<view class="uni-not-weixin:text-red">非微信小程序红色文字</view>

<!-- 在除 H5 外的所有平台生效 -->
<view class="uni-not-h5:bg-blue">非 H5 蓝色背景</view>

属性模式

配合 attributify 模式，可以使用属性语法：

<!-- 只在微信小程序生效 -->
<view uni-weixin:text-red>微信小程序红色文字</view>

<!-- 只在 H5 生效 -->
<view uni-h5:bg-blue>H5 蓝色背景</view>

支持的平台

• 小程序：mp-weixin（微信）、mp-alipay（支付宝）、mp-baidu（百度）、mp-qq（QQ）、mp-toutiao（头条）、mp-kuaishou（快手）、mp-lark（飞书）、mp-jd（京东）、mp-360（360）
• App：app、app-plus、app-harmony（鸿蒙）、app-android、app-ios
• uni-app x APP：appx（安卓、iOS、鸿蒙）
• H5/Web：h5、web（两者互通）
• 快应用：quickapp、quickapp-webview 等

简写形式

<!-- 使用简写（去掉 mp- 前缀） -->
<view class="uni-weixin:text-sm">微信小程序小字体</view>
<view class="uni-alipay:text-sm">支付宝小程序小字体</view>
<view class="uni-baidu:text-sm">百度小程序小字体</view>
<view class="uni-qq:text-sm">QQ小程序小字体</view>
<view class="uni-toutiao:text-sm">头条小程序小字体</view>
<view class="uni-kuaishou:text-sm">快手小程序小字体</view>
<view class="uni-lark:text-sm">飞书小程序小字体</view>
<view class="uni-jd:text-sm">京东小程序小字体</view>

平台别名

致谢

感谢以下开源项目：

• UnoCSS - 提供核心原子化 CSS 引擎和大部分功能
• unocss-applet - 提供小程序平台支持
• @uni-helper/unocss-preset-uni - 提供按平台编写样式的灵感

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助