這篇文章給大家分享的是有關微信小程序實時監聽less文件編譯成wxss文件的示例的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創新互聯公司2013年成立，是專業互聯網技術服務公司，擁有項目成都網站設計、成都網站建設網站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元荔灣做網站,已為上家服務,為荔灣各地企業和個人服務,聯系電話:18982081108

我們的微信小程序項目選擇的技術棧是：原生 + 內嵌h6，技術選型沒毛病，就是覺得哪里怪怪的。同樣的設計稿，通常h6開發比小程序開發快，郁悶，為啥呀？小程序提供了很多封裝好的組件，為什么開發起來還是效率低，找到問題的根源之一，小程序原生開發，樣式使用的是wxss，不能使用嵌套語法，開發效率自然而然就打了折扣，后期wxss 維護起來也比較麻煩。

前世

用wxss開發太慢了，微信小程序原生開發，我不想寫wxss了。想著微信小程序都出來這么久，應該有成熟的方案來解決這個問題，于是我找到了以下幾種方案。

方案一：webstorm配置less自動編譯

這種方案適合使用webstorm編輯器開發者，無奈我現在鐘情于VSCode（或者微信開發者工具，調試還是要用它） ，并不想使用webstorm，只好再尋覓其它的方案了。

使用 webstorm 編輯器開發者可以按照以下參考文章配置。

• webstorm配置less自動編譯

• webstorm less文件編譯成wxss文件配置

方案二：用gulp-less自動編譯

引用 gulp 的任務流執行任務，gulp-less 一個 gulp 自動化構件工具的一個插件，專門用來處理 less 文件使其產出 css 文件提供給生產環境使用。這種方案，可以用，還不太符合我的要求，我懶，不想手動編譯啊。尋尋覓覓尋找到下一個解決方案。

• gulp-less gulp打包處理less

方案三：wxss-cli：全局命令行 + 路徑

終于找到一個還不錯的解決方案，echo008開發的wxss-cli，這個工具全局安裝后，運行 wxss ./path來將 less 編譯成 wxss。使用了一周發現，每天到公司開發，都需要先去拷貝要編譯項目的目錄，我不想每次都拷貝路徑啊。并且編譯的時候會把 node_modules 里的less也給編譯。這樣編譯的速度就慢了。我只想，在我的項目根目錄下面pages 和 components文件下編譯，沒有辦法嗎？

這三種方案，沒有一個用著順手的......

今生

---

于是我就給wxss-cli的作者提了issues，一周過去了作者沒理我。

等不了了，不行就自己上，扒源碼，改成了符合我要求的。那個目錄需要編譯less，就在哪個文件目錄下，執行命令 less-to-wxss watch，進行實時監聽，將 less 自動轉換成wxss文件。

用著甚是順手。我又給作者留了issus，沒理我，好像其它幾個issus也沒理，可能作者太忙了沒顧上。終于支持多個終端里面執行 less-to-wxss watch 了。這個插件對于小程序原生開發的猿猿們來說，真是太好用了。一個插件就新鮮出爐了。需要的自取。less-to-wxss的npm包

less-to-wxss

---

less-to-wxss的優點：

1. 不用傳路徑

2. 全局安裝，一鍵編譯less-to-wxss watch

3. 自持多終端，多目錄使用

改進后的less-to-wxss 的實現原理，通過輸入命令，獲取到當前位置路徑，對改目錄下的文件進行文件遍歷監聽，通過 less 工具將 less 編譯成 wxss, 重命名后保存到原目錄下。原 less 文件更新繼續上述的流程操作。

感謝各位的閱讀！關于“微信小程序實時監聽less文件編譯成wxss文件的示例”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

網站名稱：微信小程序實時監聽less文件編譯成wxss文件的示例-創新互聯
網站鏈接：http://m.newbst.com/article44/hcghe.html

成都網站建設公司_創新互聯，為您提供定制網站、手機網站建設、建站公司、定制開發、微信小程序、網站內鏈

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯