Skip to content

whidy/UnoCSS-Study-Examples

Repository files navigation

UnoCSS Study Examples

当前资料对应的 UnoCSS 版本为 0.55.0 ,其他相关依赖版本请参见 package.json

【2023年08月10日】

当时创建该项目的时候还是2022年6月,UnoCSS虽然出来也有些时间了,但是生态及文档都比较简陋,所以就有了我这个项目,不过我既然都拖到了现在,其实很多东西也有了变化,官方的相关文档也非常详细了,唯一的不足就是没有中文版,不过也很详细了。那么我这个项目,尽量以丰富的示例,围绕一些使用感受,来谈谈对UnoCSS的看法和分享。


这是个人在研究学习 UnoCSS 过程中做的总结,也是作为公司内部培训分享用到的 PPT 相关演示,仅供学习参考。

后期可能会整理成一份实践文档,发布出来。

该项目由 ViteElement-Plus 搭建,有兴趣也可以看看Vite-Element-Plus-UnoCSS

该项目适合搭建一个简单的文档演示模板站,我是通过 Markdown 来编写文档内容部分,并将结构完善,利于代码演示部分的展示,后面有空再优化整个模板的布局。

其他

关于 markdown 样式冲突问题

问题已解决,请更新到v0.15.0

因为我还没找到主题切换后, vite-plugin-md 插件自动注入的 markdown样式 覆盖了我原有的样式,导致的代码块颜色异常问题的方案,所以,如果本地预览想要看到较好的效果,你可能需要在安装依赖后尝试修改文件 node_modules/vite-plugin-md/dist/index.js6712 行,删除该行的 baseStyling 。重启服务,查看效果。相关的 issues:May I disable baseStyling for a custom markdown style

日志

2023年04月25日

更新到 0.51.8 ,新增了 uno.config.ts 文件,发现使用 eslint 进行自动 fix 时,会出现大量的空行,故引入 prettier ,双重处理,然而 prettier 的最终效果我并不喜欢,因此又操作了一次 lint:fix 。(当然务必注意 eslint 配置和 prettier 不要冲突!!!)

2023年08月18日

这次提交,将之前的路由中预设了所有场景的符合UnoCSS规则的样式类名移除了,需要看的,可以回到d337419记录上。另外在UnoCSS的配置中的 content 进行了调整,移除了解析md的类名,因为我这里用md来写教程,会自动转换。其次添加了inline,用于测试动态类名加载。

About

自己学习UnoCSS,并准备进行内部前端团队内部分享的资料,包含了许多关于UnoCSS实践的思考

Topics

Resources

License

Stars

Watchers

Forks