Vite使用UnoCSS编译时报错：pluginContext.emitFile is not a function error during build

更新说明：2022年06月17日

我今天发现报错的原因了，之前只能注释掉背景图相关的规则实现编译，现在找到原因，不能使用 @ 来引用图片地址，建议修改为 ./src/assets/.../*.jpg 这种格式后再次尝试编译。

并且我发现 rules 内需要相对严格的语法规范。

进一步关注该问题请查阅https://github.com/unocss/unocss/issues/1048

---

开发环境

由于UnoCSS还处于快速更新迭代的阶段，仍然会有许多不稳定的问题，所以还是依照惯例，将环境版本说明，也许当你读到这篇文章时的版本和我一样，但是更新完依赖就已经修复了。主要的环境情况如下：

• macOS: 12.3.1
• Node.js: 16.15.1
• vite: 2.9.10
• unocss: 0.38.2
• vue-tsc: 0.37.3

基于element-plus-vite-starter进行开发扩展。

问题和解决办法

在开发模式下一切正常，进行编译（ npm run build ）报错，信息如图

错误信息

rendering chunks (7)...[unocss:global:build:scan] pluginContext.emitFile is not a function
error during build:
TypeError: pluginContext.emitFile is not a function

基本定位和UnoCSS有关，看了下错误栈，看不懂:<，简单的检查了下我的UnoCSS的配置和可能在项目中使用的不规范的地方，还是没有解决。

于是按照国际开发解决思路的惯例，打开Google，搜索 [unocss:global:build:scan] pluginContext.emitFile is not a function ...

解决

只能查到一篇在UnoCSS项目下的issue。

看起来这个人跟我情况一样，遗憾的是，Antfu暂时还没有给出解决办法，这就有点慌了，要上测试环境给领导看，总不能一直开着dev模式吧（也不是不行，但总是要上线的，万一一直没有解决就凉凉，哪里有坑位提前告诉我，*急！在线求职，在线等！*😳）。

我就去这个提了Issue的兄弟的仓库看了下，自己研究了他的代码发现了一处共同点，那就是在 vite.config.js 中的 UnoCSS 的配置项有使用自定义背景图的规则。初步判断问题就在这里，于是试着注释掉我的项目中这段规则，效果立竿见影，编译通过。

当然那个自定义的类名也就失效了，临时解决办法就是在组件中手动添加style或者类名。（同样的，我也在该issue下方简单描述了解决办法）

虽然又是一个曲线救国的方法，但是救急方案，也没什么太大的副作用。我想应该还有不少朋友遇到过这个问题，故做个笔记。

最后：背景和UnoCSS简介

最近开发新项目，选型依然是 Vite 、 Vue3 、 Element-Plus 为主，不过突然发现 Element-Plus 官方出了个集成 Vite 的脚手架，就看了下，按照以往我一定会集成 Tailwind CSS ，大家也可以看到我之前经常提到这个非常不错的“工具”。然而这次突然看到 UnoCSS ，点进去看了下项目，带着一丢丢对造轮子的偏见，耐心读完了Antfu的中文介绍《重新构想原子化 CSS》，改变了我的看法，经过几天的了解和简单的实践，我觉得这个优势还是蛮大的，我也在着手整理一些资料打算给公司内部前端小组安利一下了。