Umi + Mako 下 Unocss 构建后样式丢失？3 个检查点快速定位

Umi + Mako 下 Unocss 构建后样式丢失？3 个检查点快速定位

【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi

本地umi dev里原子类全部生效，umi build之后页面直接裸奔——Umi + Mako + Unocss 组合下的样式丢失，九成不是编译顺序的锅。动手之前先回答一个问题：src/.umi/uno.css到底生成了没有。

别急着怀疑编译顺序，先看 uno.css 卡在哪一步

官方插件的链路是这样的：onBeforeCompiler钩子里拉起 unocss CLI 子进程，按unocss.config.ts扫描源码，把原子类写进src/.umi/uno.css，再用addEntryImports把它挂到入口，Mako 随后才和页面其它 CSS 一起打包。build 会awaitCLI 跑完再继续编译，dev 下 CLI 常驻 watch。所以"打包跑在生成前面"不成立，真正会断的是中间那一下：配置缺失时 CLI 空跑，uno.css不落地，Mako 照常打包出一个空壳。逻辑在 packages/plugins/src/unocss.ts 里，很短。

补齐两处配置，让 dev 和 build 走同一条链路

要补的东西只有两处，都在你自己项目里。

项目根放unocss.config.ts——CLI 启动前会检查它，缺文件时插件只 warn 一句就失效：

import { defineConfig, presetUno } from 'unocss'; export default defineConfig({ envMode: process.env.NODE_ENV === 'production' ? 'build' : 'dev', presets: [presetUno()], });

为什么这样写：它是原子类扫描的唯一入口配置，envMode区分 dev / build 两套环境读取。

再在 Umi 配置里声明unocss这个 key，插件是EnableBy.config，key 不出现整个插件不注册：

// .umirc.ts export default { // …其余配置保持不变 unocss: { watch: ['src'], }, };

为什么这样写：watch里的目录会原样传给 CLI 参与扫描，声明 key 同时把插件真正挂上。依赖侧把unocss和@unocss/cli装进项目，版本对照官方示例 examples/with-unocss/。

花 30 秒把三层验证跑一遍

开发态、生产态、产物文件，三层各验一次：

• src/.umi/uno.css存在且非空，能搜到你写过的类名
• umi build日志里没有"请在项目目录中添加 unocss.config.ts"这条 warn
• 产物 CSS 里 grep 得到.items-center这类原子规则
• 重装依赖后 dev 与 build 各跑一遍，表现一致

前三条分别对应生成、日志、产物，第四条防的是 watch 进程留下的假象。

这几个坑，会替你藏住问题

⚠️ dev 的 watch 会把问题藏起来：CLI 常驻进程一直补写uno.css，旧文件又留在src/.umi里——换台机器或重装node_modules后 build 产物立刻变空，dev 却还"正常"。别拿 dev 的表现给 build 背书。

IS_UMI_BUILD_WORKER也别碰：build 的 worker 进程里插件直接早退，生成只发生在主进程，自己改环境变量绕过只会让 CLI 一次都不跑。

stage 不是这个症状的旋钮：onBeforeCompiler在编译前阻塞等待，调整插件加载顺序改变不了 CLI 是否产出文件，"把 Unocss stage 调大"这种说法对空文件无效。

下次 build 完先 grep 一眼产物 CSS，再决定要不要怀疑构建工具。

【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi