### [微信小程序实时监听less文件编译成wxss文件，全局命令工具和less-to-wxss](https://www.prosaas.cn/article/16636)

**Published:** 2020-06-15T03:11:18

**Author:** 5201314

**Excerpt:** 我们的微信小程序项目选择的技术栈是：原生 + 内嵌h5，技术选型没毛病，就是觉得哪里怪怪的。同样的设计稿，通常…

我们的微信小程序项目选择的技术栈是：原生 + 内嵌h5，技术选型没毛病，就是觉得哪里怪怪的。同样的设计稿，通常h5开发比小程序开发快，郁闷，为啥呀？小程序提供了很多封装好的组件，为什么开发起来还是效率低，找到问题的根源之一，小程序原生开发，样式使用的是 `wxss`，不能使用嵌套语法，开发效率自然而然就打了折扣，后期 `wxss` 维护起来也比较麻烦。

前世

用 `wxss `开发太慢了，微信小程序原生开发，我不想写`wxss`了。想着微信小程序都出来这么久，应该有成熟的方案来解决这个问题，于是我找到了以下几种方案。

**方案一：webstorm配置less自动编译**

这种方案适合使用 `webstorm `编辑器开发者，无奈我现在钟情于 `VSCode`（或者微信开发者工具，调试还是要用它） ，并不想使用 `webstorm `，只好再寻觅其它的方案了。

> 使用 webstorm 编辑器开发者可以按照以下参考文章配置。

-   webstorm配置less自动编译
    
-   webstorm less文件编译成wxss文件配置
    

**方案二：用gulp-less自动编译**

引用 gulp 的任务流执行任务，gulp-less 一个 gulp 自动化构件工具的一个插件，专门用来处理 less 文件使其产出 css 文件提供给生产环境使用。这种方案，可以用，还不太符合我的要求，我懒，不想手动编译啊。寻寻觅觅寻找到下一个解决方案。

-   gulp-less gulp打包处理less
    

**方案三：wxss-cli：全局命令行 + 路径**

终于找到一个还不错的解决方案，echo008开发的wxss-cli，这个工具全局安装后，运行 wxss ./path来将 less 编译成 wxss。使用了一周发现，每天到公司开发，都需要先去拷贝要编译项目的目录，我不想每次都拷贝路径啊。并且编译的时候会把 node\_modules 里的less也给编译。这样编译的速度就慢了。我只想，在我的项目根目录下面pages 和 components文件下编译，没有办法吗？

这三种方案，没有一个用着顺手的......

![](https://img.php.cn/upload/image/890/129/984/1592190162903605.png)

**今生**

* * *

于是我就给wxss-cli的作者提了issues，一周过去了作者没理我。

![](https://img.php.cn/upload/image/962/873/998/1592190219348881.png)

等不了了，不行就自己上，扒源码，改成了符合我要求的。那个目录需要编译 `less`，就在哪个文件目录下，执行命令` less-to-wxss watch`，进行实时监听，将 less 自动转换成 `wxss `文件。

![](https://img.php.cn/upload/image/367/427/904/1592190265223767.png)

用着甚是顺手。我又给作者留了issus，没理我，好像其它几个issus也没理，可能作者太忙了没顾上。终于支持多个终端里面执行 less-to-wxss watch 了。这个插件对于小程序原生开发的猿猿们来说，真是太好用了。一个插件就新鲜出炉了。需要的自取。less-to-wxss的npm包

**less-to-wxss**

* * *

**less-to-wxss的优点：**

1.  不用传路径
    
2.  全局安装，一键编译 `less-to-wxss watch`
    
3.  自持多终端，多目录使用
    

改进后的 `less-to-wxss` 的实现原理，通过输入命令，获取到当前位置路径，对改目录下的文件进行文件遍历监听，通过 less 工具将 less 编译成 wxss, 重命名后保存到原目录下。原 less 文件更新继续上述的流程操作。

推荐教程：《微信小程序》

以上就是微信小程序实时监听less文件编译成wxss文件，全局命令工具和less-to-wxss的详细内容，更多请关注知企PROSAAS其它相关文章！

**Categories:** 后端开发

---