Umi 搭配 UnoCss 构建后样式丢失三步改完的避坑指南【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umiumi dev里原子类好使一跑umi build页面就裸奔如果你在用 umi 集成 unocss 做原子化 CSS大概率是官方插件没被正确激活。umi 其实内置了 UnoCss 支持umijs/plugins里的unocss插件它会在编译前调用 unocss CLI 生成uno.css再把这份 CSS 注入入口文件——但整条链路有两个哑巴条件缺一个就静默失效。30 秒自诊一条命令确认是否踩中对号入座符合任意一条就是这个问题dev 环境原子类如flex、text-center生效build 产物里样式缺失构建日志里闪过一句请在项目目录中添加 unocss.config.ts 文件你以为是提示没在意配置里写了unocss: {}但项目根目录找不到unocss.config.ts一条命令验证插件有没有真正跑起来umi build ls src/.umi/uno.css文件不存在说明 unocss CLI 压根没执行原子样式自然没进产物。根因一图流uno.css 到底在哪一步生成大白话版这个插件用enableBy: config启用意思是你在 umi 配置里写上unocss这个键插件才会醒醒来后它监听onBeforeCompiler在打包器动手前先跑一遍 unocss CLI 把原子类扫成 CSS。而 CLI 自己又强制要求根目录有unocss.config.ts否则只警告不产出。两个条件环环相扣任何一环断了uno.css就不会出现在入口的 import 里最终产物自然没有原子样式。官方实现不长想细看可以翻 unocss 插件源码。最小改动清单只动这三处1️⃣ 装依赖package.jsonnpm i -D unocss unocss/cli umijs/pluginsunocss/cli是插件调用的命令行本体缺一不可。2️⃣ 新建unocss.config.ts项目根目录import { defineConfig, presetUno } from unocss; export default defineConfig({ envMode: build, presets: [presetUno()], });CLI 靠这个文件确定扫描哪些 preset文件缺失整个流程就断在这。可参考 with-unocss 示例的写法。3️⃣ 在.umirc.ts里激活插件export default { unocss: { watch: [src], // dev 模式下监听这些目录 }, };这一行不是配置样式而是开关unocss键一出现插件才被启用onBeforeCompiler和addEntryImports才会挂进构建流程。验证一次过dev 与 build 各来一条开发环境umi dev预期日志出现unocss watch mode is running!src/.umi/uno.css随代码改动实时更新页面上flex等类直接生效。生产环境umi build grep -c w-full dist/*.css预期计数大于 0说明原子规则含w-full、text-center等已打进最终 CSS。页面布局与 dev 一致即通关。避坑备忘unocss.config.ts必须叫这个名字且放在项目根目录改名或挪进src都会触发仅告警不产出的静默失败unocss.watch只监听列出的目录新增页面目录如pages-v2后要同步补上否则 dev 下改了不刷新.umi/uno.css是构建临时产物别手改也别提交进版本库.gitignore里排除掉即可完整可跑的项目见 examples/with-unocss照着抄三处改动样式问题一次收工。【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考