LESS 是一個編寫 CSS 的很好的方式 ，讓你可以使用變量，嵌套規則，混入以及其它許多有用的功能，它可以幫助您更好地組織你的 CSS 代碼。

最近我一直在研究 Node.js ，并想用?less-middleware?中間件，這樣我可以很容易的在我的應用程序中使用 LESS 了。配置好以后，LESS-Middleware 能夠自動處理編譯你的 LESS 代碼為 CSS 代碼。

?

?

如果你把 LESS 和 CSS 文件存儲在同一個目錄，配置很簡單，但我想用不同的路徑為我的源目錄和目標目錄，這個地方就有點問題了，所以在這里，我想我把發現的問題記錄下來。 如果您指定一個不同的 "src" 和 "dest" 的目錄，您還必須提供 "prefix" 選項，它必須匹配跟在您的目標目錄中后面的目錄。下面是這個例子可以更好的讓你理解： var lessMiddleware = require("less-middleware");app.use(lessMiddleware({src: __dirname + "/less",dest: __dirname + "/public/css",prefix: "/css",force: true })); app.use(express.static(__dirname + "/public"));

　　在這個例子中，我把源目錄配置為我的應用程序的根目錄下的 "/less" 目錄，并讓 CSS 輸出到 "/public/css 目錄。此外，你還需要指定 "prefix" 屬性，以匹配跟在 "/public" 后面的目錄，即 "/css" 目錄。

　　你還可以指定其它參數，上面指定了 force 參數，讓每次請求的時候重新編譯 LESS 文件，再結合自動刷新功能，這樣在開發的時候修改樣式代碼都可以有即時的效果。

　　最后在頁面上引用 CSS 文件就和正常的一樣了：

<link rel="stylesheet", type="text/css", href="css/styles.css">

升級和遷移　　

　　這邊文章發布的時候，less-middleware 已更新到到 1.0.3 版本，上面的配置是針對?0.1.x 的，下面給大家介紹如果從 0.1.x 遷移到 1.0.x。

　　首先，也是重要的變化——源目錄參數的變化，之前是放在 options 參數里的，如下：

lessMiddleware({src: path.join(__dirname, '/public') })

　　因為源目錄是必備參數，所以升級之后作為中間件的第一個參數，如下：

lessMiddleware(path.join(__dirname, '/public'))

　　第二個變化是中間件參數和 LESS 參數分離，這樣參數結構更清晰明了，如下：

lessMiddleware(source, [{options}], [{parserOptions}], [{compilerOptions}])

　　options 參數是提供給中間件使用的，而后面兩個參數對象不會影響中間件，是傳遞給 LESS 解析和編譯器的。

　　在這個調整之后，對應參數定義方式也要相應的調整，下面是一些對應的修改：

• compress: 從?options 移除，需要在?compilerOptions 中定義；
• dumpLineNumbers: 從?options 移除，需要再?parserOptions 中定義；
• optimization: 從?options 移除，需要再?parserOptions 中定義；
• paths:?從?options 移除，需要再?parserOptions 中定義；
• preprocessor: 已經被移動到?preprocessor.less 中進行定義；
• relativeUrls:?從?options 移除，需要再?parserOptions 中定義；
• sourceMap:?從?options 移除，需要在?compilerOptions 中定義；
• yuicompress:?從?options 移除，需要在?compilerOptions 中定義；

　　第三個變化是新增加了參數，同時移除了 prefix 和 treeFunctions 參數，讓你可以更靈活的進行配置，如下：

• postprocess.css: 在被保存之前，修改 CSS 編譯輸出；
• preprocess.less: 在 LESS 被解析和編譯前進行修改；
• preprocess.path: 在被文件系統加載前，修改 LESS 路徑；

　　有了這幾個參數，我們之前使用 prefix 實現的功能可以用下面的方式達到同樣的效果：

preprocess: {path: function(pathname, req) {return pathname.replace(/^\/less\//, '/css');} }

　　更詳細的信息，可以參考?less-middleware?官方文檔。

?

您可能感興趣的相關文章

• 創意無限！一組網頁邊欄過渡動畫【附源碼下載】
• 真是好東西！13種非常動感的頁面加載動畫效果
• 你見過嗎？9款超炫的復選框（Checkbox）效果
• 超贊！基于 Bootstrap 的響應式的后臺管理模板
• 太贊了！超炫的頁面切換動畫效果【附源碼下載】

?

本文鏈接：LESS-Middleware：Node.js 和 LESS 的完美搭配

編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源

轉載于:https://www.cnblogs.com/lhb25/p/less-middleware-using-less-with-node-js.html

總結

以上是生活随笔為你收集整理的LESS-Middleware：Node.js 和 LESS 的完美搭配的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。