微信小程序_如何支持Less等CSS框架開發(fā)
發(fā)布時間：2018-05-07 15:19 所屬欄目：小程序開發(fā)教程
先說點什么呢，小程序很強大，但官方開發(fā)工具美中不足，不支持Scss，Less 等樣式框架，只能支持原生CSS，所以這里琢磨一下怎么樣如何支持Less 等。
-
mac 環(huán)境
-
Less，Scss 等
首先 確保安裝了 npm， 然后執(zhí)行 npm install less -g ，稍等一會，安裝完成后 出現(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 新的文件類型模板
這個時候，每新建一個 Less 文件，都會創(chuàng)建 wxss 文件，Less 文件是用 Less 的語法，wxss 文件 是被自動轉(zhuǎn)譯成 原生CSS 的語法，之后直接編寫 Less 文件內(nèi)容，會自動同步且轉(zhuǎn)譯到 wxss 文件內(nèi)，由此 才可被 微信開發(fā)工具識別，順利運行。
注意 ：等到項目開發(fā)的差不多時，若覺得*.less 和 *.css 文件占用太多空間，可在終端用 命令 直接 刪除即可。
注意 ：還有個問題，因為使用小程序的 API，導致大量報錯 而且沒有提示，可以在 webstorm 導入 WechatCodejar，避免一下這個情況
然后 我們就暫時脫離了 微信開發(fā)工具 中編程，但還是要在 微信開發(fā)工具中看效果，一邊是 webstorm 強大的 IDE編寫代碼，一邊是官方工具自動編譯預覽，簡直不要太爽。
