微信小程序_如何支持Less等CSS框架開發(fā)
發(fā)布時(shí)間：2018-05-07 15:19 所屬欄目：小程序開發(fā)教程
先說點(diǎn)什么呢，小程序很強(qiáng)大，但官方開發(fā)工具美中不足，不支持Scss，Less 等樣式框架，只能支持原生CSS，所以這里琢磨一下怎么樣如何支持Less 等。
-
mac 環(huán)境
-
Less，Scss 等
首先 確保安裝了 npm， 然后執(zhí)行 npm install less -g ，稍等一會(huì)，安裝完成后 出現(xiàn)下圖，紅線框內(nèi) 是 路徑。
增加文件類型 wxml，wxss
打開 webstorm，Preferences -> Editor -> File Types
各自添加 *.wxml，*.wxss 等格式的文件， 并記錄在 HTML 和 Less 上
增加文件監(jiān)聽
打開 webstorm，Preferences -> Tools > File Watcher 創(chuàng)建 文件監(jiān)聽，添加
增加文件類型模板
打開 webstorm，Preferences -> Editor -> File and Code Templates，添加wxss 新的文件類型模板
這個(gè)時(shí)候，每新建一個(gè) Less 文件，都會(huì)創(chuàng)建 wxss 文件，Less 文件是用 Less 的語法，wxss 文件 是被自動(dòng)轉(zhuǎn)譯成 原生CSS 的語法，之后直接編寫 Less 文件內(nèi)容，會(huì)自動(dòng)同步且轉(zhuǎn)譯到 wxss 文件內(nèi)，由此 才可被 微信開發(fā)工具識(shí)別，順利運(yùn)行。
注意 ：等到項(xiàng)目開發(fā)的差不多時(shí)，若覺得*.less 和 *.css 文件占用太多空間，可在終端用 命令 直接 刪除即可。
注意 ：還有個(gè)問題，因?yàn)槭褂眯〕绦虻?API，導(dǎo)致大量報(bào)錯(cuò) 而且沒有提示，可以在 webstorm 導(dǎo)入 WechatCodejar，避免一下這個(gè)情況
然后 我們就暫時(shí)脫離了 微信開發(fā)工具 中編程，但還是要在 微信開發(fā)工具中看效果，一邊是 webstorm 強(qiáng)大的 IDE編寫代碼，一邊是官方工具自動(dòng)編譯預(yù)覽，簡(jiǎn)直不要太爽。
易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源
碼云倉庫:
本文地址：http://www.xiuhaier.com/wxmini/doc/course/24305.html 復(fù)制鏈接
如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢：800182392 點(diǎn)擊咨詢
