如何在微信小程序中使用less詳解(最優(yōu)方式)
前言
寫慣了 less/sass，但是現(xiàn)在開發(fā)小程序缺還是 css，很不習(xí)慣。
在網(wǎng)上搜的教程，要么是 gulp，要么就是 vscode 的 Easy-less 的插件。
傳統(tǒng)方式
我們來對(duì)比，這兩種方式的優(yōu)劣。
Gulp
前者要對(duì)于 gulp 有簡(jiǎn)單的了解，但是現(xiàn)在大道其行的 webpack 來說，gulp 用的人也越來越少，而且具有一定的學(xué)習(xí)成本，但好在自定義程度較高，自己可以隨便添加take。
VScodd的Esay-less插件
啥都不說，挺香的，直接在 vscode 安裝 easy-less 插件，然后 seting.json，就可以愉快的使用 less 了
保存一下就可以在同目錄生成 .wxss 文件，缺點(diǎn)是必須在 vscode 中使用，也就是說你在開發(fā)中要打開倆個(gè)編輯器，一遍使用 vscode寫 less，一邊使用微信開發(fā)者工具看預(yù)覽.....emmmmm，畫面太美不敢想象
新的方式
偶然，在網(wǎng)上看到 你想在小程序里使用less嘛? （VScode版） 里有人放出一張截圖
直接在微信開發(fā)者工具里使用的Easy-less，功能和在vscode里使用的一樣，驚為天人的我感覺跑去官方文檔去看，原來微信開發(fā)者工具早在 1.03.2004271 版本之后就開始支持?jǐn)U展工具了。
并且直接使用vscode的擴(kuò)展就可以，很方便
經(jīng)過自己一連串的操作，證明是可以的。
步驟
1、Vscode 安裝 Easy-less
2、擴(kuò)展文件夾
其解包后的文件夾可以在 ~/.vscode/extensions (macOS 系統(tǒng)) 或 C:\Users\用戶名.vscode\extensions (Microsoft Windows 系統(tǒng)) 下找到
復(fù)制mrcrowl.easy-less-1.6.3文件到微信開發(fā)者工具當(dāng)中
3. 粘貼擴(kuò)展文件夾
打開微信開發(fā)者工具，top 欄，設(shè)置>擴(kuò)展設(shè)置>擴(kuò)展>自定義擴(kuò)展
點(diǎn)擊，“打開擴(kuò)展文件夾”，然后會(huì)打開一個(gè)文件夾，粘貼到這里就行了。
4、設(shè)置輸出.wxss
到這里還差最后一步，因?yàn)镋asy-less，默認(rèn)輸出的css，但是小程序中要使用.wxss的文件，所以設(shè)置一下輸出的文件后綴即可。
5、重啟微信開發(fā)者工具
設(shè)置成功后，關(guān)閉小程序在打開，然后在 pages 目錄下隨便找個(gè)頁面新建一個(gè)index.less，寫一點(diǎn) CSS 保存看看 index.wxss，有沒有發(fā)生變化...
最終效果
參考：
總結(jié)
到此這篇關(guān)于如何在微信小程序中使用less(最優(yōu)方式)的文章就介紹到這了,更多相關(guān)微信小程序使用less內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
基于javascript實(shí)現(xiàn)泡泡大冒險(xiǎn)網(wǎng)頁版小游戲
這篇文章主要介紹了基于javascript實(shí)現(xiàn)泡泡大冒險(xiǎn)網(wǎng)頁版小游戲，很有趣的游戲，可以練習(xí)打字速度，感興趣的小伙伴們可以參考一下2016-03-03
圖片動(dòng)畫橫條廣告帶上下滾動(dòng)的JS代碼
可以自定義廣告的圖片、鏈接、長(zhǎng)、寬等。光標(biāo)移到圖片上會(huì)出現(xiàn)左右箭頭，有需要的朋友可以參考一下2013-10-10
本文主要介紹了JavaScript中setTimeout()的具體用法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
Bootstrap每天必學(xué)之基礎(chǔ)排版，排版是學(xué)習(xí)的最基礎(chǔ)環(huán)節(jié)，相當(dāng)于地基，所以大家一定要認(rèn)真對(duì)待，認(rèn)真學(xué)習(xí)本文內(nèi)容。2015-11-11
這篇文章主要幫助大家理解javascript閉包概念優(yōu)缺點(diǎn)及應(yīng)用，幫助大家全面的學(xué)習(xí)javascript閉包，需要的朋友可以參考下2015-12-12
詳解微信小程序框架wepy踩坑記錄（與vue對(duì)比）
這篇文章主要介紹了詳解微信小程序框架wepy踩坑記錄（與vue對(duì)比）,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
uniapp開發(fā)h5項(xiàng)目引入第三方j(luò)s(sdk)兩種方法
這篇文章主要給大家介紹了關(guān)于uniapp開發(fā)h5項(xiàng)目引入第三方j(luò)s(sdk)的兩種方法,在Uniapp中引入JS文件是一項(xiàng)常見的操作,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
Openlayers測(cè)量距離與面積的實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了Openlayers測(cè)量距離與面積的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
微信小程序?qū)崙?zhàn)之自定義模態(tài)彈窗（8）
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崙?zhàn)之自定義模態(tài)彈窗，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
利用XMLHTTP傳遞參數(shù)在另一頁面執(zhí)行并刷新本頁
利用XMLHTTP傳遞參數(shù)在另一頁面執(zhí)行并刷新本頁...2006-10-10