最近我在使用 UnoCSS 构建一个项目时，遇到了一些让人很头大的问题。尤其是在处理暗色模式（dark mode）时，一些样式总是无法生效，最终通过不断调试和查阅资料，才终于搞明白问题所在。 这篇文章总结一下我踩过的坑，希望能帮到遇到类似情况的你 👇 💡 背景介绍 我使用的是 UnoCSS 的 presetWind4，配置中选择了暗色模式跟随系统（…

我们以前原生开发Web前端，一般推荐写样式的时候使用内部样式表（class），而不是写内联样式。主要是因为： 内联样式每用一次就要写一次，而 class 只需要写一次 内联样式的优先级高，会把 class 的样式覆盖掉。有时候可能改了 class 的样式，却忘了有内联样式。 但是，用了框架之后，开发的方法发生了变化。组件变得可以重复使用。因此，只要…

上一篇文章我介绍了为了开发组件库而用的相关配置文件。这篇文章里，我会介绍在文件夹里并存两套配置的方法。 很明显，开发 Vue 组件库的时候，文件夹里不太可能只有组件本身的代码（当然你就那么做也不是不可以），文件夹里通常还有着一些测试内容，比如 App.vue ，它们和组件一起运行测试。在打包的时候我们只想打包组件，不打包测试内容。除此之外，还有很多…

如果想要在多个项目中使用同样的组件的话，每次手动导入会比较麻烦，使用 npm 包是一种便捷的做法。 不过，打包 npm 包的行为和打包为网页不太一样，我们不能够简单地直接把 build 的成果直接当做 npm 包。有几个地方需要注意，下面我把自己打包过程中的几个点总结一下。 package.json 的配置 小白需要先理解 package.json…

由于 Tailwind CSS 默认使用 Tree Shaking 机制，只保留项目中使用到了的类，所以 npm 组件库中写的模板类不会被使用。 对于这个问题，其实没有比较好的解决办法…… 我的解决办法是这样的：让 Tailwind CSS 把组件库扫描一下，保留里面用到的模板类。 创建一个 tailwind.config.js 配置文件： /**…

🎯 Tailwind 已经内置了 reset，叫做 Preflight，而且比你手写的 * { padding: 0; margin: 0; } 更科学、兼容性更强。 ✅ Tailwind 的 reset 有哪些优势？ 来自 normalize.css + 针对现代浏览器优化； 不会盲目清除一切，而是保留一些对可访问性友好的默认样式； 自动设置 b…

平时，网页的 JavaScript 报错只有在控制台才能看到，网页看上去就是停住不动了，也不知道发生了什么事情。 如果你不想让用户知道发生了什么的话，这样做是可以的。不过，如果我们想更加方便地看到到底发生了什么，或者明确提示用户网页发生了错误，那么我们还是应该把报错显示出来。 使用 vue 的全局配置处理报错 vue 的 app.config.er…