在MVC中使用dotless后台动态解析LESSCSS的学习笔记

通过学习LessCSS,我们知道,Less是需要通过编译才能生成 .css 文件,主要使用三种方式进行编译:

1)使用第三方编译工具,在项目发布前编译好放在项目中。

2)在浏览器端解析执行,需要引用 less.js 。

3)使用第三方程序集在后台动态解析,例如:在.net平台下的dotless。

这篇随笔记录了如何在.net MVC项目中使用dotless动态解析less。

具体实现

1、创建MVC4 Web的基本项目

在 Content 文件夹中添加 lesses 文件夹,并在该文件夹下添加自己的 .less 文件。(建议使用VS2013及以上版本进行LESS开发,因为vs2013支持LESS、SASS和CoffeeScript模板。

2、安装dotless包到项目中

1)使用NuGet控制台安装,输入命令如下:

Install-Package dotless

2)使用NuGet管理界面安装

使用上述方法安装之后,项目会自动引用 dotless.Core 程序集,并会在项目中添加 web.config.install.xdt 文件,该文件中包含了需要添加到 Web.config 配置文件中相关节点。(备注:我参考的资料上都说会自动修改配置文件,但是我测试时并没有自动修改配置文件,所以我手动修改的配置文件。)

3、修改配置文件

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" />

4、添加一个类实现  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";
        }
    }
}

5、修改 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")中标记为红色的代码不能相同。

6、在视图中引用样式

代码如下:

@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

时间: 2024-10-20 00:59:54

在MVC中使用dotless后台动态解析LESSCSS的学习笔记的相关文章

Scala中隐式转换初体验实战详解以及隐式转换在Spark中的应用源码解析之Scala学习笔记-49

package com.leegh.implicits import scala.io.Sourceimport java.io.File /** * @author Guohui Li */ class RichFile(val file: File) { def read = Source.fromFile(file.getPath()).mkString}object Context { implicit def file2RichFile(file: File) = new RichFi

Scala中隐式参数与隐式转换的联合使用实战详解及其在Spark中的应用源码解析之Scala学习笔记-51

package com.leegh.implicits /** * @author Guohui Li */ object Implicit_Conversions_with_Implicit_Parameters { def main(args: Array[String]): Unit = { def bigger[T](a: T, b: T)(implicit ordered: T => Ordered[T]) = if (ordered(a) > b) a else b println

Scala中隐式转换内幕操作规则揭秘、最佳实践及其在Spark中的应用源码解析之Scala学习笔记-55

package com.leegh.implicits import scala.io.Sourceimport java.io.File /** * @author Guohui Li */class RicherFile(val file: File) { def read = Source.fromFile(file.getPath).mkString} class File_Implicits(path: String) extends File(path)//伴生对象object Fi

Scala类型约束代码实战及其在Spark中的应用源码解析之Scala学习笔记-39

package com.leegh.parameterization /** * @author Guohui Li */object Type_Contraints { def main(args: Array[String]): Unit = { def rocky[T](i: T)(implicit ev: T <:< java.io.Serializable) { println("Life is too short,you need Spark!") } rock

Scala中Context Bounds代码实战及其在Spark中的应用源码解析之Scala学习笔记-36

package com.leegh.parameterization /** * @author Guohui Li */ class Pair_Ordering[T: Ordering](val first: T, val second: T) { def bigger(implicit ordered: Ordering[T]) = { if (ordered.compare(first, second) > 0) first else second }} object Context_Bo

Scala中类型变量Bounds代码实战及其在Spark中的应用源码解析之Scala学习笔记-34

package com.leegh.parameterization /** * @author Guohui Li */class Pair[T <: Comparable[T]](val first: T, val second: T) { def bigger = if (first.compareTo(second) > 0) first else second} class Pair_Lower_Bound[T](val first: T, val second: T) { def

Scala中隐式参数实战详解以及隐式参数在Spark中的应用源码解析之Scala学习笔记-50

package com.leegh.implicits /** * @author Guohui Li */object Context_Implicits { implicit val default: String = "java"} object Param { def print(content: String)(implicit language: String) { println(language + ":" + content) }} object

Scala中Variance代码实战及其在Spark中的应用源码解析之Scala学习笔记-40

package com.leegh.parameterization /** * @author Guohui Li */ class Personclass Student extends Personclass C[+T](val args: T) trait Friend[-T] { def makeFriend(somebody: T)}object Variance { def makeFriendWithYou(s: Student, f: Friend[Student]) { f.

ClassTag 、Manifest、ClassManifest、TypeTag代码实战及其在Spark中的应用源码解析之Scala学习笔记-37

package com.leegh.parameterization import scala.reflect.ClassTag /** * @author Guohui Li */class A[T] object Manifest_ClassTag { def main(args: Array[String]): Unit = { def arrayMake[T: Manifest](first: T, second: T) = { val r = new Array[T](2); r(0)