如何完美的在微信小程序中使用less

image.png

直接在微信开发者工具里使用的Easy-less，功能和在vscode里使用的一样

image.png

步骤

1、Vscode 安装 Easy-less

image.png

2、扩展文件夹

解包后的文件夹可以在 ~/.vscode/extensions (macOS 系统) 或 C:\Users\用户名.vscode\extensions (Microsoft Windows 系统) 下找到

image.png

如下图所示：打开微信小程序编辑器，找到扩展菜单，导入解压好的
mrcrowl.easy-less-1.7.4文件

image.png image.png image.png

3、设置输出.wxss

到这里还差最后一步，因为Easy-less，默认输出的css，但是小程序中要使用.wxss的文件，所以设置一下输出的文件后缀即可。

image.png image.png image.png

4、重启微信开发者工具

重启小程序编辑器，然后在 pages 目录下随便找个页面新建一个.less文件，写一点 CSS 保存看看 .wxss中有没有发生变化

最终效果

image.png