@umi/max中使用unocss, 同时开启mako，dev启动报错，如何处理？

[ChrisLey520]

使用antdPro来创建的项目。配置文件基本上是脚手架默认创建的，我添加了unocss相关的配置。运行 pnpm dev 时，页面一直处于初始的加载中。报错找不到 src/.umi/uno.css，但是看了下有这个文件，猜测是后续才生成的，在mako读取的时候还没生成。困扰已久，求解答。

报错内容：
[Mako] Runtime error found, and it will cause a full reload. If you want HMR to work, please fix the error.

umi.ts:13 Uncaught Error: Cannot find module '/Users/chris/Desktop/WorkSpace/code/agent-card-admin/src/.umi/uno.css'

config/config.ts文件：

const config = {
  // 省略其他配置

  mako: {},
  plugins: [require.resolve('@umijs/plugins/dist/unocss')],
  unocss: {
    // 检测 className 的文件范围，若项目不包含 src 目录，可使用 `pages/**/*.tsx`
    watch: ['src/**/*.tsx'],
  },
}

export default config;

unocss.config.ts文件:

// unocss.config.ts

import { defineConfig, presetAttributify, presetWind3 } from 'unocss';

export function createConfig({ strict = true, dev = true } = {}) {
  return defineConfig({
    envMode: dev ? 'dev' : 'build',
    presets: [presetAttributify({ strict }), presetWind3()],
  });
}

export default createConfig();

依赖版本：
unocss@^66.6.6, @unocss/cli": "^66.6.6, @umijs/max@4.3.24

[Jerry-CodeHub]

你的判断是对的，这是一个时序竞争问题（race condition）。

根本原因：

Umi 内置的 @umijs/plugins/dist/unocss 插件采用的是 sidecar（侧载）架构——它会在 dev 启动时，额外启动一个独立的 UnoCSS CLI 进程来监听文件变化并生成 src/.umi/uno.css。这个设计在 Umi 早期搭配 webpack 打包器时是可以工作的，因为 webpack 启动相对较慢，sidecar 有足够时间先生成好 CSS 文件。

但你开启了 mako: {}，Mako 是基于 Rust 的打包器，启动和模块解析速度远快于 webpack。当 Mako 解析到 src/.umi/uno.css 的 import 时，sidecar 进程还没来得及生成这个文件，所以报了 Cannot find module 错误。

这个问题在 Umi 官方 Issue [#11403](#11403) 中有明确记录，官方也承认了 sidecar 方案的缺陷（速度慢、与新打包器不兼容等）。

解决方案（推荐程度从高到低）：

方案 1：改用 UnoCSS 的 PostCSS 插件（推荐）

绕过 Umi 内置的 sidecar 插件，改用 UnoCSS 官方的 PostCSS 集成方式，这种方式与打包器无关，不存在时序问题：

pnpm add -D @unocss/postcss

1）移除 config.ts 中的 Umi 内置 unocss 配置：

// 删除以下两项
// plugins: [require.resolve('@umijs/plugins/dist/unocss')],
// unocss: { watch: ['src/**/*.tsx'] },

2）在项目根目录创建 postcss.config.cjs：

module.exports = {
  plugins: {
    '@unocss/postcss': {},
  },
};

3）在 unocss.config.ts 中添加 content 配置：

import { defineConfig, presetAttributify, presetWind3 } from 'unocss';

export default defineConfig({
  content: {
    filesystem: ['src/**/*.tsx'],
  },
  presets: [presetAttributify({ strict: true }), presetWind3()],
});

4）在全局样式文件（如 src/global.css）中添加 UnoCSS 指令：

@unocss preflights;
@unocss default;

这样 UnoCSS 会作为 PostCSS 插件在打包流程内部运行，与 Mako 完全兼容，不存在竞争问题。

方案 2：临时方案——关闭 Mako

如果不想改 UnoCSS 集成方式，可以暂时移除 mako: {} 配置，回退到 webpack 打包器：

const config = {
  // mako: {},  // 注释掉这行
  plugins: [require.resolve('@umijs/plugins/dist/unocss')],
  unocss: {
    watch: ['src/**/*.tsx'],
  },
};

这样 sidecar 有足够时间在 webpack 启动前生成好 CSS 文件。但你会失去 Mako 的构建速度优势。

额外注意： 你的 unocss.config.ts 文件中有重复代码（import 语句和函数定义出现了两遍中英文混杂），建议也一并清理一下。