分享开发经验瓜分5000元大奖，聊聊#玩转抖音开放平台#的故事
Bug: 本文中使用的Easy Sass插件在使用import语句时会导致文件的重复包含，解决办法参考：EasySass插件修复：s[ac]ss文件中使用import时候导致多次包含
如题，原来在开发小程序的时候其实我是不太倾向各家自己的开发者工具的，因为很多扩展支持的不是很好，但是最近在开发原生小程序组件，所以就避免不了与 抖音开发者工具 打交道。
技术栈方面已开始就想选用 Typescript + SCSS ，因为组件要提供给其他开发者使用，所以使用ts完善类型定义很有必要，而SCSS则可以大大提高开发效率，不用重复写冗余的类名嵌套，但是开发者工具是只支持选用typescript，而不支持使用SASS或者LESS的，但我们可以通过其他的方法来实现保存SASS/LESS后自动编译，以下是该解决方案的具体步骤：
1、从vscode下载扩展
首先该解决方案的主角是两个扩展 Easy Sass 和 Easy Less ，其中sass的扩展在抖音开发者工具中搜索不到，我们需要先从 vscode 下载这个扩展（less扩展可以在抖音开发者工具中搜索到直接下载）
2.找到对应的扩展文件移动到抖音开发者工具的扩展目录下
从vscode安装完该扩展之后，找到这个扩展文件，其安装目录路径如下：
/users/你的用户名/.vscode/extensions/spook.easysass-0.0.6 （mac os）
window路径与之对应，猜测应该在 C:\Users\你的用户名\.vscode\extensions\spook.easysass-0.0.6 （找不到可以在评论区留言）
复制这个扩展文件，并粘贴在抖音开发者工具的扩展目录下，开发者工具扩展目录如下：
/Applications/抖音开发者工具.app/Contents/Resources/app/app.content/extensions
提示：上面地址为mac os下的示例；window系统可以大致对f应找到该文件夹，若找不到可以在评论区给作者留言。
3.重新启动抖音开发者工具
这个时候重新启动抖音开发者工具并新建一个scss文件，在保存的时候会在同级目录下生成 同名.css 和 同名.min.css 文件，如图：
4.修改配置文件以生成.ttss
现在可以正常编译scss文件了，但是我们想要的是ttss而不是css，这个时候我们就可以将复制过来的 spook.easysass-0.0.6 文件夹里的 package.json 里有一项contributes.configuration.properties.easysass.formats.default，可以直接command(ctrl)+F搜索 easysass.formats ，如图：
如果要生成 ttss文件 我们只需要将这一项改成下面这样：
5.测试
现在我们重启一下抖音开发者工具，重启完成后重新保存一下 scss文件 ，可以看到同级目录下生成了一个 同名.ttss 文件，其内容如下：
6.写在最后
到这里我们就可以愉快的使用scss来写样式文件了，less的配置与scss大同小异...如果有任何不懂的地方可以在评论区给作者留言，如果对你又帮助，请为作者点个小小的赞哦👍👍👍
目前开发者工具仍然存在很多不足的地方，所以希望我们能共同给出一些问题的解决方案，也相信官方会在不久后内置某些需求的解决方案，但是在这之前我们就需要自己摸索出一些途径了。
另：作者正在全力写一个专属于头条小程序的内置组件库(g-ui)，如果想使自己的开发效率更上一层楼可以关注下：
为社区贡献高颜值的原生自定义组件(g-ui)的第1天：线型进度条组件
为社区贡献高颜值的原生自定义组件(g-ui)的第2天：验证码输入框
持续更新中...