怎么在微信小程序中使用less詳解

這篇文章主要介紹“怎么在微信小程序中使用less詳解”，在日常操作中，相信很多人在怎么在微信小程序中使用less詳解問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么在微信小程序中使用less詳解”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

前言

寫慣了 less/sass，但是現(xiàn)在開發(fā)小程序缺還是 css，很不習(xí)慣。

在網(wǎng)上搜的教程，要么是 gulp，要么就是 vscode 的 Easy-less 的插件。

傳統(tǒng)方式

我們來對比，這兩種方式的優(yōu)劣。

Gulp

前者要對于 gulp 有簡單的了解，但是現(xiàn)在大道其行的 webpack 來說，gulp 用的人也越來越少，而且具有一定的學(xué)習(xí)成本，但好在自定義程度較高，自己可以隨便添加take。

VScodd的Esay-less插件

啥都不說，挺香的，直接在 vscode 安裝 easy-less 插件，然后 seting.json，就可以愉快的使用 less 了
保存一下就可以在同目錄生成 .wxss 文件，缺點是必須在 vscode 中使用，也就是說你在開發(fā)中要打開倆個編輯器，一遍使用 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ò)展

點擊，“打開擴(kuò)展文件夾”，然后會打開一個文件夾，粘貼到這里就行了。

4、設(shè)置輸出.wxss

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

5、重啟微信開發(fā)者工具

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

最終效果

參考：

• 官方文檔-編輯器擴(kuò)展

• vscode-easy-less

• 你想在小程序里使用less嘛? （VScode版）

• Less 中文網(wǎng)

總結(jié)

到此，關(guān)于“怎么在微信小程序中使用less詳解”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>