通过学习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

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

  1. MVC中使用Entity Framework 基于方法的查询学习笔记 (二)

    解释,不解释: 紧接上文,我们在Visual Studio2012中看到系统为我们自动创建的视图(View)文件Index.cshtml中,开头有如下这句话: @model IEnumerable&l ...

  2. MVC中使用Entity Framework 基于方法的查询学习笔记 (一)

    EF中基于方法的查询方式不同于LINQ和以往的ADO.NET,正因为如此,有必要深入学习一下啦.闲话不多说,现在开始一个MVC项目,在项目中临床学习. 创建MVC项目 1.“文件”--“新建项目”-- ...

  3. MVC中使用Entity Framework 基于方法的查询学习笔记 (三)

    紧接上文,我们已经学习了MVC数据上下文中两个常用的类,这两个类承载着利用函数方式进行数据查询的全部内容,我们既然已经了解了DbSet<TEntity> 是一个泛型集合,并且实现了一些接口 ...

  4. 人工智能中小样本问题相关的系列模型演变及学习笔记(二):生成对抗网络 GAN

    [说在前面]本人博客新手一枚,象牙塔的老白,职业场的小白.以下内容仅为个人见解,欢迎批评指正,不喜勿喷![握手][握手] [再啰嗦一下]本文衔接上一个随笔:人工智能中小样本问题相关的系列模型演变及学习 ...

  5. tensorflow中使用mnist数据集训练全连接神经网络-学习笔记

    tensorflow中使用mnist数据集训练全连接神经网络 ——学习曹健老师“人工智能实践:tensorflow笔记”的学习笔记, 感谢曹老师 前期准备:mnist数据集下载,并存入data目录: ...

  6. Spring MVC中页面向后台传值的几种方式

    在学习 Spring Mvc 过程中,有必要来先了解几个关键参数:   @Controller:         在类上注解,则此类将编程一个控制器,在项目启动 Spring 将自动扫描此类,并进行对 ...

  7. Spring MVC 中使用 Swagger2 构建动态 RESTful API

    当多终端(WEB/移动端)需要公用业务逻辑时,一般会构建 RESTful 风格的服务提供给多终端使用. 为了减少与对应终端开发团队频繁沟通成本,刚开始我们会创建一份 RESTful API 文档来记录 ...

  8. MVC中关于 使用后台代码 检查 用户名是否已经被清册

    在 注册页面  NewUser 的 Controller中写以下代码 public  ActionResult GetUserIndataByUserName() { string UserName= ...

  9. MVC中使用Echart后台加载数据 实现饼图、折线图、全国地图数据,单击双击事件等

    @{ Layout = null; } @if (false) { <script src="~/Js/jquery-easyui-1.5/jquery.min.js"> ...

随机推荐

  1. bjwc Day3 & 4 妈妈我这是来了个什么地方呀

    真·bjwc开始了 Day3 T1啥啥啥 第k大斜率?想都没想码了个暴力,然后爆零...暴力都能错,退役 T2看着像网络流就扔了个网络流大暴力上去,六七十分的样子然后蜜汁wa T3题面说“想都没想就弄 ...

  2. 二:apache的Qpid消息中间件介绍

    一:什么是Qpid?--->Qpid 是 Apache 开发的一款面向对象的消息中间件,它是一个 AMQP 的实现,可以和其他符合 AMQP 协议的系统进行通信.--->Qpid 提供了 ...

  3. 【Python】python2.7 安装配置OpenCV2

    环境:Ubuntu16.04 anaconda Python2.7 opencv2.4.13 安装opencv后 import cv2 遇到错误信息: No module named cv2 安装op ...

  4. POJ3928(树状数组:统计数字出现个数)

    Ping pong Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 2641   Accepted: 978 Descript ...

  5. Spring boot 学习八 Springboot的filter

    一:  传统的javaEE增加Filter是在web.xml中配置,如以下代码: <filter> <filter-name>TestFilter</filter-nam ...

  6. SQL一次性插入大量数据【转载】

    在SQL Server 中插入一条数据使用Insert语句,但是如果想要批量插入一堆数据的话,循环使用Insert不仅效率低,而且会导致SQL一系统性能问题.下面介绍SQL Server支持的两种批量 ...

  7. Windows下git的安装与配置

    表示git安装成功.

  8. 利用oracle session context 向oracle传值

    有时候,我们在执行数据库请求时,需要向数据库传一些应用程序的上下文信息,比如当前应用的用户.举个场景,我们要通过触发器记录对某些关键表的修改日志,日志包括修改的表,字段,字段的值,修改的时间,当然非常 ...

  9. mysql由浅入深探究(四)----mysql事务详解

    什么是事务: 通俗的解释就是对数据库进行的一组完整的操作,这组完整的操作中包含一个或多个操作.解释的太low了,来点官方的:事务就是DBMS中执行的一个完整的逻辑单元,这个逻辑单元中包含一个或者多个操 ...

  10. 原生js实现一个侧滑删除取消组件(item slide)

    组件,本质上是解决某个问题封装的类,在此记录原生js实现侧滑删除 先上效果图 实现思路 1. 确定渲染的数据结构 2. 思考划分布局,总的有两个主要的模块:内容区域和按钮区域 2.1 内容区域保持宽度 ...