所谓新年新对象…不对…新气象，新的一年大家也要努力解(xin)决(zeng)更多bug哦。
所谓工欲善其事必先利其器，自从新版的ccc扩展系统推出以来，工具也是不断推陈出新，新版的cocos扩展为我们带来了更多便利和可能性。
但有时候我会想，看习惯了cocos风格的UI，有没有这么可能搞搞新意思呢，于是我就想试(xia)试(zhe)看(teng)。
首先目标就锁定了Ta
这个号称程序员专用UI框架，因为只需要简单几行代码，就可以设计出漂亮的界面而广受广大程序员欢迎，热度仅次于程序员同性交友平台 gitHub.com
于是说干就干，先新建一个扩展项目
- 打开一个create项目，创建一个新扩展
不好意思放错图了，这个才对
依次点击扩展->创建扩展
这里推荐带Vue的扩展，这样做出来的扩展可以更灵活好用 - 扩展目录结构
这里简单介绍一下目录结构
@types：是编辑器API的TS定义，简单来说就是给你写代码的时候代码提示和编译通过用的
i18n：多语言配置目录，比如package.json这里的配置"description": "i18n:tinypng_nice_helper.description",，实际就会根据编辑器的语言去读取对应的配置文字。
src：不多说了，就是源代码
static：静态页面和资源都放这里
3.添加css引用
我第一次的做法，就是直接添加了bootstrap的css，发现是可行的，做法如下
找到这个主页文件：xxx/extensions/xxxx/static/template/default/index.html
添加bootstrap的css定义
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous" > - 愉快的添加UI组件
<a href="#" class="btn btn-primary btn-sm" >压缩</a>
外观还行
由于时间的关系，这里可以直接看我摆完的界面效果
还是挺小清新的
等！等！等！
还没完
这里，有个小问题
这个css文件是外部加载的，所以每次打开需要加载（卡一下），而且万一断网了，面板直接就废了。
追求极致的我们，怎么能忍受这种不完美
方案2想都不用想，开工
直接把css下到本地，然后改一下link不就完了~
如果你像我一样改完 ，然后会发现~~~~~~并没有效果
这里就不卖关子了，正确做法是，打开src/panels/default/script/index.ts文件
找到这行代码
style: readFileSync(join(__dirname, '../../../../static/style/default/index.css'), 'utf-8')你得把新的css加到这里来
这里有个小技巧
大家看到这个style并不是数组，怎么新增我们的css呢？其实很简单，css本质上也是一个文本定义文件而已，实际上css是可以合并的，于是这么写即可：
好了，本次内容就这么多了，内容比较少，废话比较多
如果大家喜欢，下次分享一下：用户配置如何做、如何对文件进行hash缓存、文件路径处理技巧。
下面广告时间
这里顺便安利一下我的新扩展，基于TinyPNG的项目图片自动压缩工具
多线程操作，进度可视化
文件缓存，避免重复压缩，只压缩新增和改动文件
可配置过滤器，加快扫描速度
地址：
图片压缩(基于TinyPNG) | Cocos Store
