如何在微信小程序中使用less詳解(最優(yōu)方式)
前言
寫慣了 less/sass，但是現(xiàn)在開發(fā)小程序缺還是 css，很不習慣。
在網(wǎng)上搜的教程，要么是 gulp，要么就是 vscode 的 Easy-less 的插件。
傳統(tǒng)方式
我們來對比，這兩種方式的優(yōu)劣。
Gulp
前者要對于 gulp 有簡單的了解，但是現(xiàn)在大道其行的 webpack 來說，gulp 用的人也越來越少，而且具有一定的學習成本，但好在自定義程度較高，自己可以隨便添加take。
VScodd的Esay-less插件
啥都不說，挺香的，直接在 vscode 安裝 easy-less 插件，然后 seting.json，就可以愉快的使用 less 了
保存一下就可以在同目錄生成 .wxss 文件，缺點是必須在 vscode 中使用，也就是說你在開發(fā)中要打開倆個編輯器，一遍使用 vscode寫 less，一邊使用微信開發(fā)者工具看預覽.....emmmmm，畫面太美不敢想象
新的方式
偶然，在網(wǎng)上看到 你想在小程序里使用less嘛? （VScode版） 里有人放出一張截圖
直接在微信開發(fā)者工具里使用的Easy-less，功能和在vscode里使用的一樣，驚為天人的我感覺跑去官方文檔去看，原來微信開發(fā)者工具早在 1.03.2004271 版本之后就開始支持擴展工具了。
并且直接使用vscode的擴展就可以，很方便
經(jīng)過自己一連串的操作，證明是可以的。
步驟
1、Vscode 安裝 Easy-less
2、擴展文件夾
其解包后的文件夾可以在 ~/.vscode/extensions (macOS 系統(tǒng)) 或 C:\Users\用戶名.vscode\extensions (Microsoft Windows 系統(tǒng)) 下找到
復制mrcrowl.easy-less-1.6.3文件到微信開發(fā)者工具當中
3. 粘貼擴展文件夾
打開微信開發(fā)者工具，top 欄，設置>擴展設置>擴展>自定義擴展
點擊，“打開擴展文件夾”，然后會打開一個文件夾，粘貼到這里就行了。
4、設置輸出.wxss
到這里還差最后一步，因為Easy-less，默認輸出的css，但是小程序中要使用.wxss的文件，所以設置一下輸出的文件后綴即可。
5、重啟微信開發(fā)者工具
設置成功后，關閉小程序在打開，然后在 pages 目錄下隨便找個頁面新建一個index.less，寫一點 CSS 保存看看 index.wxss，有沒有發(fā)生變化...
最終效果
參考：
總結
到此這篇關于如何在微信小程序中使用less(最優(yōu)方式)的文章就介紹到這了,更多相關微信小程序使用less內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
原生JS forEach()和map()遍歷的區(qū)別、兼容寫法及jQuery $.each、$.map遍歷操作
這篇文章主要介紹了原生JS forEach()和map()遍歷的區(qū)別、兼容寫法及jQuery $.each、$.map遍歷操作,結合實例形式分析了JS使用forEach()和map()以及jQuery使用$.each、$.map進行遍歷操作相關技巧與操作注意事項,需要的朋友可以參考下2019-02-02
這篇文章主要介紹了mpvue 頁面預加載新增preLoad生命周期的兩種方式,本文重點給大家講解了第一種方式，需要的朋友可以參考下2019-10-10
本文為大家介紹下CSS 鼠標響應事件：鼠標經(jīng)過CSS、鼠標移動CSS、鼠標點擊CSS以及示例，喜歡的朋友可以參考下2013-09-09
這篇文章主要介紹了使用js對文章內容進行分頁的具體實現(xiàn),需要的朋友可以參考下2014-03-03
這篇文章主要匯總介紹了JavaScript實現(xiàn)添加、查找、刪除元素的方法，十分的簡單實用，有需要的小伙伴可以參考下。2015-07-07
javascript將中國數(shù)字格式轉換成歐式數(shù)字格式的簡單實例
下面小編就為大家?guī)硪黄猨avascript將中國數(shù)字格式轉換成歐式數(shù)字格式的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
解決IE6下JS動態(tài)設置圖片IMG的SRC時圖片無法加載錯誤的方法2010-01-01
開發(fā)js組件的時間調試總是麻煩的，最常用的就是用alert或者debugger來測試js的運行狀態(tài)。2010-11-11
這篇文章主要介紹了JS中數(shù)組與對象的遍歷方法,結合實例形式總結分析了JavaScript針對數(shù)組與對象遍歷操作相關函數(shù)與使用技巧,需要的朋友可以參考下2018-08-08
這篇文章主要介紹了Echarts.js無法引入問題解決方案,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-10-10