小程序中使用less(最優方式)

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

傳統方式

我們來對比，這兩種方式的優劣。
Gulp
前者要對於gulp有簡單的了解，但是現在大道其行的webpack來說，gulp用的人也越來越少，而且具有一定的學習成本，但好在自定義程度較高，自己可以隨便添加take。
VScodd的Esay-less插件
啥都不說，挺香的，直接在vscode安裝easy-less插件，然后seting.json，就可以愉快的使用less可，保存一下就可以在同目錄生成.wxss文件，缺點是必須在vscode中使用，也就是說你在開發中要打開倆個編輯器，一遍使用vscode寫less，一邊使用微信開發者工具看預覽.....emmmmm，畫面太美不敢想象

新的方式

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

 

 

直接在微信開發者工具里使用的Easy-less，功能和在vscode里使用的一樣，

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

並且直接使用vscode的擴展就可以，很方便

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

步驟

1. Vscode 安裝 Easy-less

   
   
    

   

2. 擴展文件夾
   其解包后的文件夾可以在 ~/.vscode/extensions (macOS 系統) 或 C:\Users\用戶名.vscode\extensions (Microsoft Windows 系統) 下找到
   

    

   
   
   復制mrcrowl.easy-less-1.6.3文件到微信開發者工具當中

    

3. 粘貼擴展文件夾
   打開微信開發者工具，top欄，設置>擴展設置>擴展>自定義擴展
   點擊，“打開擴展文件夾”，然后會打開一個文件夾，粘貼到這里就行了。

4. 重啟微信開發者工具，不然找不到下面的配置文件

5. 設置輸出.wxss
   到這里還差最后一步，因為Easy-less，默認輸出的css，但是小程序中要使用.wxss的文件，所以設置一下輸出的文件后綴即可。

 

 

 

 

5. 再次重啟微信開發者工具
   設置成功后，關閉小程序在打開，然后在pages下隨便找個頁面新建一個，index.less，寫一點保存看看index.wxss，有沒有發生變化

最終效果

 

 

每次新建的項目需要配置一下輸出的文件后綴。

參考：

• 官方文檔-編輯器擴展
• vscode-easy-less
• 你想在小程序里使用less嘛? （VScode版）
• Less 中文網

作者：九旬大爺的夢
鏈接：https://www.jianshu.com/p/3db6f7f33752