[LESS] 在windows下編譯*.less

原文地址：http://www.dotblogs.com.tw/ajun/archive/2012/07/20/73519.aspx?fid=42162

這篇不介紹 LESS 是甚麼,只記錄一下怎麼準備在 windows 下用 command-line 編譯 *.less 的環境.

安裝 node.js

直接從 node.js 網站下載msi安裝檔後執行安裝即可.

透過 npm 安裝 less

npm是node.js的packagemanaer,安裝完 node.js 後就會這程式可以用.

所以只要透過npm安裝less這個package就可以了.

首先執行node.js command prompt,在開啟的command視窗下執行

 

npm install less -g

 

LESS官方網站上說明是是直接使用 npminstall less,不過為了方便使用lessc,

所以建議加上-g, 將它安裝成global package

執行完指令後,就等它跑完就可以使用lessc了

使用 lessc 編譯*.less

在node.js command prompt的視窗下先切換到你要編譯的 *.less 檔案目錄下,

然後執行下面指令

 

lessc filename.less > filename.css //非壓縮

lessc filename.less >filename.css -x //壓縮

執行完後,指定的css檔就會產生在所在的目錄下

另：

瀏覽器端使用

LESSCSS也可以不經編譯，直接在瀏覽器端使用。

使用方法： 下載LESSCSS的.js檔案，例如lesscss-1.4.0.min.js。

在頁面中引入.less檔案

<link rel="stylesheet/less" href="example.less" />

需要注意rel屬性的值是stylesheet/less，而不是stylesheet。

引入第1步下載的.js檔案

<script src="lesscss-1.4.0.min.js"></script>

需要特別注意的是，由於瀏覽器端使用時是使用ajax來拉取.less檔案，因此直接在本機檔案系統開啟（即地址是file://開頭）或者是有跨域的情況下會拉取不到.less檔案，導致樣式無法生效。

還有一種情況容易導致樣式無法生效，就是部分伺服器（以IIS居多）會對未知尾碼的檔案返回404，導致無法正常讀取.less檔案。解決方案是在伺服器中為.less檔案配置MIME值為text/css（具體方法請搜尋）。或者還有一種更簡單的方法，即是直接將.less檔案改名為.css檔案即可。