能共存，但需明确分工：unocss负责原子类按需生成，全局css负责reset、主题变量等不可拆分样式骨架，且须通过nuxt.config.ts的css数组引入assets下的文件以确保编译与hmr。
UnoCSS 和全局 CSS 能否共存？
能，但必须明确分工：UnoCSS 负责原子类按需生成，全局 CSS（如 reset、theme 变量、基础排版）负责不可拆分的样式骨架。混用时若不隔离作用域，reset.css 里的 * { margin: 0 } 可能被 UnoCSS 的 mt-4 覆盖失败——因为两者注入时机、提取方式、优先级来源完全不同。
常见错误是把 main.css 里定义的 CSS 变量（如 :root { --primary: #00dc82 }）删掉，指望 UnoCSS 的 text-primary 自动读取，结果变量未声明导致颜色失效。
- UnoCSS 不解析或注入任何非原子类规则，它只认你配置的
rules、shortcuts和预设类名 - 全局 CSS 必须通过
nuxt.config.ts的css数组引入，否则 SSR 下不会出现在中 - 不要在
uno.config.ts里@import全局 CSS 文件——UnoCSS 不处理 import，只会忽略
全局 CSS 应该放在 assets 还是 static？
放 assets 目录，路径写成 '~/assets/css/main.css'。这是唯一能确保被 Webpack 编译、支持 @use / @forward（SCSS）、参与 HMR 热更新的方式。
如果误放进 static/css/main.css，Nuxt 会跳过编译，直接复制到输出目录；此时你改了变量值，开发服务器不会感知，必须手动重启 nuxi dev 才生效。
-
assets下的文件可含 Sass 变量、@import、@layer，且顺序受css数组控制 -
static下的 CSS 只能靠app.head.link.push()注入，且无法参与 PurgeCSS 或 UnoCSS 的扫描逻辑 - 第三方未编译 CSS（如
swiper-bundle.min.css）可放node_modules，直接写'~/node_modules/swiper/swiper-bundle.min.css'
UnoCSS 配置中哪些项会影响全局样式行为？
theme 和 shortcuts 是关键。UnoCSS 的 theme.colors.primary 若和 main.css 里的 --primary-color 值不一致，text-primary 和 bg-primary 就会渲染出两种颜色——它们根本不是同一个源。
更隐蔽的问题是 extractor 配置缺失：默认 extractor 不识别 <script setup lang="ts"></script> 里的字符串类名（如 class="text-primary flex"），导致这些原子类不被收集，最终页面无样式。
- 务必在
uno.config.ts中启用presets: [presetUno(), presetAttributify()]，否则class="d-flex p-4"不生效 - 使用
shortcuts定义复合类（如['btn','px-4 py-2 bg-blue-600 text-white']）时，确保它不覆盖全局 CSS 中已定义的.btn原始规则 - 若项目用暗色模式，
theme中的screens或colors必须与color-mode插件的 class 切换逻辑对齐（如.dark .text-primary）
为什么 build 后部分 UnoCSS 类丢失，而全局 CSS 正常？
大概率是 content 配置没覆盖全部模板文件。UnoCSS 默认只扫描 **/*.{vue,html,js,ts}，但如果你在 .md（Markdown 页面）、app.config.ts 或服务端 API 返回的 HTML 字符串里写了原子类，它们不会被提取。
另一个常见原因是 extractCSS: true 没启用。Nuxt 在 target: 'static' 下默认关闭 CSS 提取，导致 UnoCSS 生成的样式没被打包进 _nuxt/ 目录，静态部署后 404。
- 检查
nuxt.config.ts是否有build: { extractCSS: true }（尤其在ssr: false或target: 'static'时） - 显式扩展
content：例如content: { files: ['**/*.{vue,html,md,ts}'] } - 避免在
plugins/里动态import()UnoCSS 类——它只处理构建期静态分析，不处理运行时
全局样式和 UnoCSS 的边界其实很薄：一个变量名不一致、一处路径写错、一次 HMR 失效，就足以让按钮颜色错乱或间距消失。真正麻烦的不是配置本身，而是后续谁改了 main.css 里的 --spacing-xs，却忘了同步更新 uno.config.ts 里的 theme.spacing。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
