如何在Vue 3中正确配置UnoCSS？-css教程-PHP中文网

必须在 vite.config.ts 中显式引入 unocss 插件并在 main.ts 中导入 'uno.css'，否则样式不生效；插件需通过 import unocss from 'unocss/vite' 注册，且配置文件 uno.config.ts 需正确定义 presets 和 shortcuts。

如何在vue 3中正确配置unocss？

必须在 vite.config.ts 中显式引入插件，并在 main.ts 中导入 uno.css，否则样式完全不会生效——这是最常被跳过的硬性步骤。

UnoCSS 插件必须在 Vite 配置中注册

很多人只装了包却没启用插件，导致 class 写得再对也无 CSS 输出。Vite 不会自动识别 unocss，必须手动接入：

import UnoCSS from 'unocss/vite' —— 注意路径是 /vite，不是 /index 或直接 unocss
plugins: [vue(), UnoCSS()] —— 插件需加入数组，顺序无关，但不能漏掉
若使用自定义配置文件（如 uno.config.ts），要传入 configFile 选项：UnoCSS({ configFile: './uno.config.ts' })
不写 UnoCSS() 就等于没装，class="p-4" 会被当成普通 class 忽略

入口文件必须 import 'uno.css'

UnoCSS 不像传统 CSS 框架那样靠插件自动注入全局样式，它生成的是一个虚拟的 CSS 文件，必须显式导入才能挂载到 DOM：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

在 main.ts（或 main.js）顶部添加：import 'uno.css'
不能写成 import 'unocss'、import 'virtual:uno.css'（旧版写法已弃用）、或放在组件里按需导入
如果用的是 createApp(App).mount('#app')，这行 import 必须在 createApp 之前
Vite 开发服务器启动后，首次访问页面若无样式，先检查控制台是否报 Failed to load resource: net::ERR_ABORTED —— 很可能就是漏了这行

预设和快捷方式要在 uno.config.ts 里声明

默认只启用 presetUno，其他能力（如属性写法、图标、快捷类）全靠配置驱动：

创建 uno.config.ts（推荐），内容至少包含：import { defineConfig, presetUno } from 'unocss' + export default defineConfig({ presets: [presetUno()] })
想用 text="red-500" 这种属性写法？加 presetAttributify()，并确保已安装 @unocss/preset-attributify
需要 i-phosphor:home 图标？加 presetIcons()，并安装对应包
快捷类如 btn-primary 必须写在 shortcuts 字段里，不在配置中声明就不会生成对应 CSS
配置文件路径必须正确：Vite 默认只认项目根目录下的 uno.config.ts；若放错位置或拼错名（如 unocss.config.ts），插件会静默回退到最小预设

暗黑模式支持依赖 class 切换与 dark: 变体

UnoCSS 本身不接管主题逻辑，但提供开箱可用的 dark: 前缀规则——前提是 HTML 根节点有 class="dark"：

手动切换：document.documentElement.classList.toggle('dark')，或用 useDark（@vueuse/core）绑定
写法示例：bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100
不要试图用 data-theme="dark" 或 prefers-color-scheme 直接触发，UnoCSS 只响应 dark: + .dark class 组合
若用了 presetWind 或自定义主题色，记得在 theme.colors 里为 dark 分支补全值，否则 dark:bg-primary 可能 fallback 到 undefined