Loading... 一、unocss ● unocss是什么？ ● 解决了什么问题？ ● 我为什么选择它 二、为什么选择它 不同的项目之间肯定会用到相同的样式，例如弹性盒子、margin、padding等等， Windi CSS, 和Tailwind CSS框架就解决了这种问题,但是我还是选择了unocss因为它是一个引擎，而非一款框架，它并未提供核心工具类，所有功能可以通过预设和内联配置提供， unocss中也集成了tailwind和Windi CSS，Tailwind依赖于 PostCSS 的 AST 进行修改，而 Windi则是编写了一个自定义解析器和 AST,但是UnoCSS 考虑到在开发过程中，这些工具 CSS 的并不经常变化,通过非常高效的字符串拼接来直接生成对应的 CSS 而非引入整个编译过程,同时，UnoCSS 对类名和生成的CSS字符串进行了缓存，当再次遇到相同的实用工具类时，它可以绕过整个匹配和生成的过程 三、预设 使用unocss中的presetUno就可以使用以下地址中的全部类名https://uno.antfu.me/，但是个人并不推荐，因为我们常用的其实也就是那么几个样式，没必要引入那么多的类名，也防止，多人开发，使用类名不统一的情况，其次他关于px的处理默认都是rem单位，如果要转换为px，还要下载一个预设进行转换，关于弹性盒子的封装名字也是很长，那就自己封装一个预设@xt-plugins/preset-base-unocss，该预设包含一下样式 弹性盒子： flex f-x a-c j-c f-x display: flex j-c justify-content: center j-b justify-content: space-between j-a justify-content: space-around j-s justify-content: flex-start j-e justify-content: flex-end a-c align-items: center a-s align-items:flex-start a-e align-items: flex-end f-w flex-wrap:wrap f-n-w flex-wrap:nowrap f-x-c display: flex, flex-direction": "column marign、padding、font-size关于这三个，直接使用正则进行的配置，可以使用任意一个数字，举个10px的例子 m-10 margin:10x ml-10 margin-left:10px mr-10 margin-right:10x mb-10 margin-bottom:10x padding同上 ... ft-10 font-size:10x 文本类 text-ellipsis { overflow: "hidden", "text-overflow": "ellipsis", "white-space": "nowrap", } 四、和less结合使用 如果想在less文件中使用`f-x`，需下载`@unocss/transformer-directives`插件，在less中使用如下方式 .box{ @appy f-x a-c j-c; } 五、智能提示 有人可能觉得这种方式，都看不到具体的意思，感到排斥或者不喜欢，但是`unocss`的作者开发了`unocss`插件,在vscode中下载`unocs插件`你会看到如下效果，当鼠标hover事，显示详细信息，当写的时候会有智能提示 六、design token 具体配置我不在这里赘述，style-dictionary中说的非常清楚，如果以后的项目需要使用到`design token`请和我及时沟通，我放在这个地址下新建一个文件夹，用来存放对应的token，示例如下 import fetch from "node-fetch"; import fs from 'fs'; fetch( "https://git.xtspace.cn/wxy/xt-designtoken/-/raw/main/xt-visual-editor/index.json" ) .then((res) => res.text()) .then((json) => { try{ fs.writeFileSync('./tokens/index.json', json) }catch(err){ console.error(err); } }); { "style": "node scripts/design-token && style-dictionary build" } 七、注意事项、 比如我们有的项目需要对接ue5，如果是在ue5场景中直接使用，会报错，原因是因为_uno.css的加载方式使用的是top-level-await，导致的不兼容，在unocss@0.48.4版本中已经修复了这个问题，但是需要额外配置，如下 Unocss({ hmrTopLevelAwait: false }), 额外说一句，如果是vite使用unocss/vite,如果是webpack使用@unocss/webpack，以上所说已经在BI当时集成 最后修改：2023 年 05 月 20 日 © 允许规范转载 打赏 赞赏作者 赞 0 如果觉得我的文章对你有用，请随意赞赏
4 条评论
哈哈哈，写的太好了https://www.lawjida.com/
你的文章让我学到了很多技能，非常实用。 https://www.yonboz.com/video/38359.html
《突然成仙了怎么办》国产动漫高清在线免费观看：https://www.jgz518.com/xingkong/11427.html
想想你的文章写的特别好https://www.ea55.com/