Vite 的约定在这里不适用
在 Vite 项目里,UnoCSS 是一个打包器插件,import "uno.css" 或 virtual:uno.css 会解析成一个生成的虚拟模块。Extension.js 用 Rspack 构建,UnoCSS 的 webpack 插件在这里解析不了那个模块。导入 uno.css 的项目会以 Can't resolve 'uno.css' 失败。
请改用 PostCSS 插件。它会把真实 CSS 文件里的 @unocss; 指令替换成生成的样式,因此没有需要解析的虚拟模块。
安装
配置
在项目根目录创建postcss.config.mjs:
uno.config.ts。content.filesystem 的 glob 告诉 UnoCSS 去哪些文件里扫描类名,因为这里没有打包器插件把模块图喂给它:
用法
创建一个带有该指令的样式表。UnoCSS 会把它替换成生成的 CSS:content_scripts/ 下。
验证
dist/chromium 下页面对应的样式表,查找你的标记里用到的类。如果文件里没有工具类规则,说明 content.filesystem 的 glob 没有覆盖使用它们的文件。
最佳实践
- 保持指令样式表精简。全局重置和设计令牌放在单独的文件里。
- 把
content.filesystem的 glob 限定在源码目录。覆盖到node_modules或dist的 glob 会拖慢每次构建。 - 每个入口导入一次指令样式表,而不是每个组件导入一次。
后续步骤
- PostCSS:检测规则,以及 Extension.js 读取的配置文件。
- Tailwind CSS:同一条管线上的 Tailwind。
- CSS:页面样式和内容脚本样式如何输出。

