HBuilder配置Less或者Sass自動編譯
阿新 • • 發佈：2019-01-09
關於Less\Sass或者其他CSS預處理語言的講解，這裡都沒有！
這裡主要講的是HBulider裡面怎樣開啟Less自動編譯功能，實現我們編寫less的時候，自動生成對應的css而不用每次都手動編譯一次，實現自動化。
首先，你的電腦裡面必須有less編譯環境才行，如下圖箭頭所指的lessc.cmd。
如果沒有也不要著急，用node.js安裝一下less即可，git裡的命令列是“npm install -g less”，cmd得在前面加上“$”符，mac系統我不管。檔案安裝完成後的位置都差不多，劃紅線的位置不同電腦路徑名不一樣。
配置環境已經OK，開啟HBuilder,在頂部選單工具–》找到預編譯器設定選項。如下圖：
這是我的已經配置好的，假設你什麼都沒有配置。點選新建，你會看到如下介面。
先把檔案字尾名填一下，用less的填寫.less字尾就行，然後點選紅框裡面的自動完成，它就幫你自動填寫好相關的路徑了，點選確定儲存配置！然後你就可以新建less檔案然後開始寫程式碼，儲存的時候你會發現它幫你建立了一個同名的css檔案並且自動把你的less編譯成對應的css了，超爽的！
另外我附帶提一下VS2015和VS2017裡面的Less自動編譯的方法，你只用在你的VS裡面安裝一個叫做LESS Compiler的外掛就可以了。然後新建less檔案，發現程式碼編輯視窗多了一個開關，開啟它之後就寫less的時候會自動生成一個同名的CSS檔案和一個壓縮版的同名CSS檔案，同樣爽的不行！
