CSS【共9篇】

经过一段时间的UnoCSS的了解和学习，做了不少研究和笔记，分享一下我的经验。

在 fontawesome6 之前，我们在使用 gatsby-plugin-fontawesome-css 插件能够很好的解决由于动态插入css造成的svg图片一开始很大，然后变小造成页面闪动的问题。然而升级了fontawesome6，插件不管用了。这下该怎么办呢？

UnoCSS的icon图标有时候没有正常显示，反复检查了icon引入方式、试着清除缓存都没用，可是同样写法有的却能生效，来看看你是不是也没注意到一个UnoCSS的细节。

最近项目使用了UnoCSS，开发环境下正常，准备发布到测试环境预览，竟然编译不通过，提示： [unocss:global:build:scan] pluginContext.emitFile is not a function ，这下慌了，赶紧补救啊。

前不久更新的响应式图片功能，对于各终端进行了较好的支持，但是最近发现这个功能失效了，再次仔细阅读MDN的文章后，代码应该是没有问题的，这就纳闷了，难道Chrome坏了，难道我又遭遇灵异事件？咱们来看看到底咋回事！

前端项目中经常需要同时引用CSS库和UI库，比如 TailwindCSS 和 ElementPlus 一起搭配，设计稿也许完全按照ElementPlus的颜色设计，比如一些重要的或危险的文字色值采用 "#F56C6C" (Danger)，而TailwindCSS中的 text-red-500 虽然近似，但终究是无法统一的，接下来我将介绍下，如何将ElementPlus的Colors扩展到TailwindCSS中。

Vite项目中使用ElementPlus和TailwindCSS出现按钮组件样式问题，明明开发的时候是好好的，这下没测试，上线原地爆炸，我的蓝色按钮上线裸奔，老板提着刀正在赶往你的工位中。。。快来看看怎么回事！！！

一个 Vue.js 项目有独立的设计规范，于是需要对整个 ElementUI 主题进行配置，这里需要通过 CLI工具 重写，参考官方文章命令行主题工具，却发生了 ReferenceError: primordials is not defined 错误，接下来看看怎么处理吧。

VueCLI 4.x 的项目集成 TailwindCSS 和 PurgeCSS 后，在开发C端Web应用中有非常好的效果，也可以满足响应式站点的需要，之前基于 VueCLI 3.x 搭建的脚手架无法运行了，这次更新了脚手架并重新总结了一下。