寫慣了 less/sass，但是現在開發小程序缺還是 css，很不習慣。 在網上搜的教程，要麼是 gulp，要麼就是 vscode 的 Easy-less 的插件。

傳統方式

我們來對比，這兩種方式的優劣。

Gulp
前者要對于 gulp 有簡單的了解，但是現在大道其行的 webpack 來說，gulp 用的人也越來越少(shǎo)，而且具有一定的學習成本，但好在自定義程度較高，自己可(kě)以随便添加take。

VScodd的Esay-less插件
啥都不說，挺香的，直接在 vscode 安裝 easy-less 插件，然後 seting.json，就可(kě)以愉快的使用 less 了

保存一下(xià)就可(kě)以在同目錄生成 .wxss 文(wén)件，缺點是必須在 vscode 中(zhōng)使用，也就是說你(nǐ)在開發中(zhōng)要打開倆個(gè)編輯器(qì)，一遍使用 vscode寫 less，一邊使用微信開發者工具看預覽.....emmmmm，畫面太美不敢想象

新的方式

偶然，在網上看到 你(nǐ)想在小程序裡使用less嘛? （VScode版） 裡有人放出一張截圖

直接在微信開發者工具裡使用的Easy-less，功能和(hé)在vscode裡使用的一樣，

驚為天人的我感覺跑去官方文(wén)檔去看，原來微信開發者工具早在 1.03.2004271 版本之後就開始支持擴展工具了。

并且直接使用vscode的擴展就可(kě)以，很方便

經過自己一連串的操作，證明是可(kě)以的。

步驟

1. Vscode 安裝 Easy-less

2. 擴展文(wén)件夾

其解包後的文(wén)件夾可(kě)以在 ~/.vscode/extensions (macOS 系統) 或 C:\Users\用戶名.vscode\extensions (Microsoft Windows 系統) 下(xià)找到

複制mrcrowl.easy-less-1.6.3文(wén)件到微信開發者工具當中(zhōng) 3. 粘貼擴展文(wén)件夾 打開微信開發者工具，top 欄，設置>擴展設置>擴展>自定義擴展 點擊，“打開擴展文(wén)件夾”，然後會打開一個(gè)文(wén)件夾，粘貼到這裡就行了。

4. 設置輸出.wxss

到這裡還差最後一步，因為Easy-less，默認輸出的css，但是小程序中(zhōng)要使用.wxss的文(wén)件，所以設置一下(xià)輸出的文(wén)件後綴即可(kě)。

5. 重啟微信開發者工具

設置成功後，關(guān)閉小程序在打開，然後在 pages 目錄下(xià)随便找個(gè)頁面新建一個(gè)index.less，寫一點 CSS 保存看看 index.wxss，有沒有發生變化...

最終效果