Whidy Writes - 我的技术笔记

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 )报错,信息如图

Vite项目下UnoCSS编译报错信息

错误信息

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简介

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

avatar

Whidy

一名爱折腾的前端开发工程师,喜欢打篮球和分享 ฅʕ•̫͡•ʔฅ