在MVC中使用dotless後臺動態解析LESSCSS的學習筆記

經過學習LessCSS，咱們知道，Less是須要經過編譯才能生成 .css 文件，主要使用三種方式進行編譯：

1）使用第三方編譯工具，在項目發佈前編譯好放在項目中。

2）在瀏覽器端解析執行，須要引用 less.js 。

3）使用第三方程序集在後臺動態解析，例如：在.net平臺下的dotless。

這篇隨筆記錄瞭如何在.net MVC項目中使用dotless動態解析less。

具體實現

一、建立MVC4 Web的基本項目

在 Content 文件夾中添加 lesses 文件夾，並在該文件夾下添加本身的 .less 文件。（建議使用VS2013及以上版本進行LESS開發，由於vs2013支持LESS、SASS和CoffeeScript模板。）

二、安裝dotless包到項目中

1）使用NuGet控制檯安裝，輸入命令以下：

Install-Package dotless

2）使用NuGet管理界面安裝

使用上述方法安裝以後，項目會自動引用 dotless.Core 程序集，並會在項目中添加 web.config.install.xdt 文件，該文件中包含了須要添加到 Web.config 配置文件中相關節點。（備註：我參考的資料上都說會自動修改配置文件，可是我測試時並無自動修改配置文件，因此我手動修改的配置文件。）

三、修改配置文件

1）在 configSections 節點中添加如下節點：

<section name="dotless" type="dotless.Core.configuration.DotlessConfigurationSectionHandler, dotless.Core" />

2）在 system.web 節點中添加如下節點：

<httpHandlers>
  <add path="*.less" verb="GET" type="dotless.Core.LessCssHttpHandler, dotless.Core" />
</httpHandlers>

3）在 system.webServer 的 handlers 節點中添加如下節點：

<add name="dotless" path="*.less" verb="GET" type="dotless.Core.LessCssHttpHandler,dotless.Core" resourceType="File" preCondition="" />

4）在 configuration 節點中添加如下節點：

<dotless minifyCss="false" cache="true" web="false" strictMath="false" />

四、添加一個類實現  IBundleTransform 接口

using System.Web.Optimization;

namespace LessCssDemo
{
    public class LessTransform : IBundleTransform
    {
        public void Process(BundleContext context, BundleResponse response)
        {
            response.Content = dotless.Core.Less.Parse(response.Content);
            response.ContentType = "text/css";
        }
    }
}

五、修改 App_Start\BundleConfig.cs 類的 RegisterBundles 方法

在 RegisterBundles 方法中添加如下代碼：

var lessBundle = new Bundle("~/Content/less").IncludeDirectory("~/Content/lesses", "*.less");
lessBundle.Transforms.Add(new LessTransform());
lessBundle.Transforms.Add(new CssMinify());
bundles.Add(lessBundle);

注意：綁定的名稱和路徑名稱不能相同。若是相同，則在啓用樣式壓縮的狀況下對less樣式的請求會報403錯誤。既代碼：new Bundle("~/Content/less").IncludeDirectory("~/Content/lesses", "*.less")中標記爲紅色的代碼不能相同。

六、在視圖中引用樣式

代碼以下：

@Styles.Render("~/Content/less")

以上，就是全部的實現步驟，在此，能夠經過修改 <compilation debug="true" targetFramework="4.5" /> 的 debug 屬性值爲 fales 來測試輸出的樣式是否壓縮。

如下提供使用vs2012建立的源碼：LESSCSSDemo.zip

參考資料

GitHub上的dotless源碼

利用CSS預處理技術實現項目換膚功能(less css + asp.net mvc4.0 bundle)

ASP.NET MVC：利用ASP.NET MVC4的IBundleTransform集成LESS

Bundling and Minification | The ASP.NET Site