如何在微信小程序中使用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、設置輸出.wxss
到這裡還差最後一步,因為Easy-less,默認輸出的css,但是小程序中要使用.wxss的文件,所以設置一下輸出的文件後綴即可。
5、重啟微信開發者工具
設置成功後,關閉小程序在打開,然後在 pages 目錄下隨便找個頁面新建一個index.less,寫一點 CSS 保存看看 index.wxss,有沒有發生變化…
最終效果
參考:
- 官方文檔-編輯器擴展
- vscode-easy-less
- 你想在小程序裡使用less嘛? (VScode版)
- Less 中文網
總結
到此這篇關於如何在微信小程序中使用less(最優方式)的文章就介紹到這瞭,更多相關微信小程序使用less內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 詳解前端任務構建利器Gulp.js使用指南
- VSCode搭建STM32開發環境的方法步驟
- Vue自定義鈴聲提示音組件的實現
- Python開發裝包八種方法詳解
- 基於Vue結合ElementUI的換膚解決方案