[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也可以不經編譯,直接在瀏覽器端使用。

使用方法:

  1. 下載LESSCSS的.js文件,例如lesscss-1.4.0.min.js。
  2. 在頁面中引入.less文件

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

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

  3. 引入第1步下載的.js文件

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

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

還有一種情況容易導致樣式無法生效,就是部分服務器(以IIS居多)會對未知後綴的文件返回404,導致無法正常讀取.less文件。解決方案是在服務器中爲.less文件配置MIME值爲text/css(具體方法請搜索)。或者還有一種更簡單的方法,即是直接將.less文件改名爲.css文件即可。








發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章