如何支持Less等CSS框架开发

我是 Sense，今天说说小程序的样式，小程序很强大，但官方开发工具美中不足，不支持Scss，Less 等样式框架，只能支持原生CSS，所以这里研究一下怎么样如何支持Less 等。

mac 环境

Less，Scss 等

WebStorm

WeChatCodejar 代码提示包

安装 Less

首先 确保安装了npm， 然后执行npm install less -g，稍等一会，安装完成后 出现下图，红线框内 是 路径。

增加文件类型 wxml，wxss

打开 WebStorm，Preferences -> Editor -> File Types

各自添加*.wxml，*.wxss等格式的文件， 并记录在 HTML 和 Less 上。

增加文件监听

打开 WebStorm，Preferences -> Tools > File Watcher创建 文件监听，添加

增加文件类型模板

打开 WebStorm，Preferences -> Editor -> File and Code Templates，添加wxss 新的文件类型模板

这个时候，每新建一个 Less 文件，都会创建 wxss 文件，Less 文件是用 Less 的语法，wxss 文件 是被自动转译成 原生CSS 的语法，之后直接编写 Less 文件内容，会自动同步且转译到 wxss 文件内，由此才可被微信开发工具识别，顺利运行。

注意 ：等到项目开发的差不多时，若觉得*.less和*.css文件占用太多空间，可在终端用 命令 直接 删除即可。

注意 ：还有个问题，因为使用小程序的 API，导致大量报错 而且没有提示，可以在 WebStorm 导入 WechatCodejar，避免一下这个情况