2026/9/11 8:45:42
FEATURED · 精选文章 
Umi 接入 UnoCss 样式丢失避坑指南一次搞懂构建前的生成链路【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umiumi dev页面花花绿绿一跑umi build样式全丢 问题多半不在 Mako而在 UnoCss 那一步根本没跑起来。下文先教你对着仓库源码认出症状再把这条构建链路掰开看最后直接动手改对。改完你连dist里uno.css长什么样都门儿清。先认症状你的 UnoCss 到底是在哪一步失效的对号入座看看你中招的是哪一种开发环境umi dev一切正常umi build之后布局散架、原子类flex、text-lg这类单原子样式集体失效构建日志里出现过一行警告请在项目目录中添加 unocss.config.ts 文件……否则插件将没有效果原子类只在新增的目录里丢老目录还好好的装了一堆 UnoCss 的包配置也写了构建却像没配过一样记住一个关键事实后面全靠它Umi 的 UnoCss 插件源码在 packages/plugins/src/unocss.ts不是在 Mako 打包过程中插手改 CSS而是在打包开始之前先单独把 UnoCss CLI 跑一遍。所以「Mako 编译顺序抢跑」这种说法其实站不住脚真正断掉的永远是「生成原子样式」这一环。根因在哪一条「先写文件、再打包」的链路用大白话讲Umi 里 UnoCss 的完整链路是这样的对照源码插件就干两件事onBeforeCompiler里execa起一个 UnoCss CLI 子进程把原子样式写到临时目录的uno.css再靠addEntryImports把这个文件塞进入口导入。Mako 只是最后一个老实打包的它拿到什么就出什么。链路里只有两个真正的坑位① CLI 没跑起来没装unocss/cli或根目录缺unocss.config.ts插件只警告不拦截② 扫描范围没盖住你的原子类新建的目录没进扫描列表。动手改装齐依赖把生成这一步跑起来补上插件真正会调的那个 CLI插件执行的是node_modules/.bin/unocss对应unocss/cli这个包。unocss主包不等于 CLI只装一个是不够的dependencies: { unocss/cli: ^0.33.0, unocss: ^0.34.1 }装完node_modules/.bin/unocss才会出现子进程才有东西可跑。在项目根目录摆对 unocss.config.tsUnoCss CLI 启动时会检查配置文件插件也是拿「根目录下有没有unocss.config.ts」来判断要不要告警import { defineConfig, presetAttributify, presetUno } from unocss; export default defineConfig({ presets: [presetAttributify({ strict: true }), presetUno()], });就放根目录文件存在但内容空CLI 一样会空转presets 别省。仓库里的官方示例 examples/with-unocss/unocss.config.ts 可以直接抄。原子类长在新目录扩一下扫描范围插件把unocss.watch里的目录逐个传给 CLI 当扫描入口默认只盯src。类写在别处就补一条export default defineConfig({ unocss: { watch: [src, shared], }, });dev下靠--watch增量重扫build时是一次性全量扫描多写的目录一次就能覆盖到。跑一次 build确认生成物真的进包了umi build构建完成打开src/.umi/uno.css或你配置的临时目录能搜到你写过的类名再进dist里找到主 CSS 确认规则在才算闭环。顺手瞄一眼构建日志不该再有那条「请在项目目录中添加 unocss.config.ts」的警告。防坑自查5 个对号全中才算修完npm ls unocss/cli有输出版本和unocss对得上根目录存在unocss.config.ts且至少配了一个 presetsrc/.umi/uno.css在 build 后真实存在且能搜到你的原子类原子类所在的目录都在unocss.watch里终端里unocss watch mode is running!dev或 CLI 无报错输出build自问自答专治疑难杂症问配置写了一堆构建还是没效果答九成是插件压根没开。UnoCss 插件是EnableBy.config不显式配unocss就不加载——最省事的写法是配置里直接加unocss: {}再去看describe的 schema 补齐你需要的字段。问dev 正常build 丢是不是 watch 没开答方向反了。dev 和 build 走的是同一条onBeforeCompiler生成逻辑区别只在 dev 多带一个--watch参数。build 丢样式先按上面清单查 CLI 和配置文件。问想确认插件到底怎么跑的答别猜直接读 packages/plugins/src/unocss.ts全文不到 70 行钩子、告警、参数拼装一眼看穿。写在最后核心动作一句话别让 Mako 背锅保证打包前unocss/cli把uno.css生成出来链路通了样式自然在。想抄作业直接看 examples/with-unocss配置和用法都在里面。【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Umi 接入 UnoCss 样式丢失避坑指南：一次搞懂构建前的生成链路
Umi 接入 UnoCss 样式丢失避坑指南一次搞懂构建前的生成链路【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umiumi dev页面花花绿绿一跑umi build样式全丢 问题多半不在 Mako而在 UnoCss 那一步根本没跑起来。下文先教你对着仓库源码认出症状再把这条构建链路掰开看最后直接动手改对。改完你连dist里uno.css长什么样都门儿清。先认症状你的 UnoCss 到底是在哪一步失效的对号入座看看你中招的是哪一种开发环境umi dev一切正常umi build之后布局散架、原子类flex、text-lg这类单原子样式集体失效构建日志里出现过一行警告请在项目目录中添加 unocss.config.ts 文件……否则插件将没有效果原子类只在新增的目录里丢老目录还好好的装了一堆 UnoCss 的包配置也写了构建却像没配过一样记住一个关键事实后面全靠它Umi 的 UnoCss 插件源码在 packages/plugins/src/unocss.ts不是在 Mako 打包过程中插手改 CSS而是在打包开始之前先单独把 UnoCss CLI 跑一遍。所以「Mako 编译顺序抢跑」这种说法其实站不住脚真正断掉的永远是「生成原子样式」这一环。根因在哪一条「先写文件、再打包」的链路用大白话讲Umi 里 UnoCss 的完整链路是这样的对照源码插件就干两件事onBeforeCompiler里execa起一个 UnoCss CLI 子进程把原子样式写到临时目录的uno.css再靠addEntryImports把这个文件塞进入口导入。Mako 只是最后一个老实打包的它拿到什么就出什么。链路里只有两个真正的坑位① CLI 没跑起来没装unocss/cli或根目录缺unocss.config.ts插件只警告不拦截② 扫描范围没盖住你的原子类新建的目录没进扫描列表。动手改装齐依赖把生成这一步跑起来补上插件真正会调的那个 CLI插件执行的是node_modules/.bin/unocss对应unocss/cli这个包。unocss主包不等于 CLI只装一个是不够的dependencies: { unocss/cli: ^0.33.0, unocss: ^0.34.1 }装完node_modules/.bin/unocss才会出现子进程才有东西可跑。在项目根目录摆对 unocss.config.tsUnoCss CLI 启动时会检查配置文件插件也是拿「根目录下有没有unocss.config.ts」来判断要不要告警import { defineConfig, presetAttributify, presetUno } from unocss; export default defineConfig({ presets: [presetAttributify({ strict: true }), presetUno()], });就放根目录文件存在但内容空CLI 一样会空转presets 别省。仓库里的官方示例 examples/with-unocss/unocss.config.ts 可以直接抄。原子类长在新目录扩一下扫描范围插件把unocss.watch里的目录逐个传给 CLI 当扫描入口默认只盯src。类写在别处就补一条export default defineConfig({ unocss: { watch: [src, shared], }, });dev下靠--watch增量重扫build时是一次性全量扫描多写的目录一次就能覆盖到。跑一次 build确认生成物真的进包了umi build构建完成打开src/.umi/uno.css或你配置的临时目录能搜到你写过的类名再进dist里找到主 CSS 确认规则在才算闭环。顺手瞄一眼构建日志不该再有那条「请在项目目录中添加 unocss.config.ts」的警告。防坑自查5 个对号全中才算修完npm ls unocss/cli有输出版本和unocss对得上根目录存在unocss.config.ts且至少配了一个 presetsrc/.umi/uno.css在 build 后真实存在且能搜到你的原子类原子类所在的目录都在unocss.watch里终端里unocss watch mode is running!dev或 CLI 无报错输出build自问自答专治疑难杂症问配置写了一堆构建还是没效果答九成是插件压根没开。UnoCss 插件是EnableBy.config不显式配unocss就不加载——最省事的写法是配置里直接加unocss: {}再去看describe的 schema 补齐你需要的字段。问dev 正常build 丢是不是 watch 没开答方向反了。dev 和 build 走的是同一条onBeforeCompiler生成逻辑区别只在 dev 多带一个--watch参数。build 丢样式先按上面清单查 CLI 和配置文件。问想确认插件到底怎么跑的答别猜直接读 packages/plugins/src/unocss.ts全文不到 70 行钩子、告警、参数拼装一眼看穿。写在最后核心动作一句话别让 Mako 背锅保证打包前unocss/cli把uno.css生成出来链路通了样式自然在。想抄作业直接看 examples/with-unocss配置和用法都在里面。【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
