在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管理界面安装
QTC({R`H@UAGEN@20D58JK.png)
使用上述方法安装之后,项目会自动引用 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
参考资料
利用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的学习笔记的更多相关文章
- MVC中使用Entity Framework 基于方法的查询学习笔记 (二)
解释,不解释: 紧接上文,我们在Visual Studio2012中看到系统为我们自动创建的视图(View)文件Index.cshtml中,开头有如下这句话: @model IEnumerable&l ...
- MVC中使用Entity Framework 基于方法的查询学习笔记 (一)
EF中基于方法的查询方式不同于LINQ和以往的ADO.NET,正因为如此,有必要深入学习一下啦.闲话不多说,现在开始一个MVC项目,在项目中临床学习. 创建MVC项目 1.“文件”--“新建项目”-- ...
- MVC中使用Entity Framework 基于方法的查询学习笔记 (三)
紧接上文,我们已经学习了MVC数据上下文中两个常用的类,这两个类承载着利用函数方式进行数据查询的全部内容,我们既然已经了解了DbSet<TEntity> 是一个泛型集合,并且实现了一些接口 ...
- 人工智能中小样本问题相关的系列模型演变及学习笔记(二):生成对抗网络 GAN
[说在前面]本人博客新手一枚,象牙塔的老白,职业场的小白.以下内容仅为个人见解,欢迎批评指正,不喜勿喷![握手][握手] [再啰嗦一下]本文衔接上一个随笔:人工智能中小样本问题相关的系列模型演变及学习 ...
- tensorflow中使用mnist数据集训练全连接神经网络-学习笔记
tensorflow中使用mnist数据集训练全连接神经网络 ——学习曹健老师“人工智能实践:tensorflow笔记”的学习笔记, 感谢曹老师 前期准备:mnist数据集下载,并存入data目录: ...
- Spring MVC中页面向后台传值的几种方式
在学习 Spring Mvc 过程中,有必要来先了解几个关键参数: @Controller: 在类上注解,则此类将编程一个控制器,在项目启动 Spring 将自动扫描此类,并进行对 ...
- Spring MVC 中使用 Swagger2 构建动态 RESTful API
当多终端(WEB/移动端)需要公用业务逻辑时,一般会构建 RESTful 风格的服务提供给多终端使用. 为了减少与对应终端开发团队频繁沟通成本,刚开始我们会创建一份 RESTful API 文档来记录 ...
- MVC中关于 使用后台代码 检查 用户名是否已经被清册
在 注册页面 NewUser 的 Controller中写以下代码 public ActionResult GetUserIndataByUserName() { string UserName= ...
- MVC中使用Echart后台加载数据 实现饼图、折线图、全国地图数据,单击双击事件等
@{ Layout = null; } @if (false) { <script src="~/Js/jquery-easyui-1.5/jquery.min.js"> ...
随机推荐
- bjwc Day3 & 4 妈妈我这是来了个什么地方呀
真·bjwc开始了 Day3 T1啥啥啥 第k大斜率?想都没想码了个暴力,然后爆零...暴力都能错,退役 T2看着像网络流就扔了个网络流大暴力上去,六七十分的样子然后蜜汁wa T3题面说“想都没想就弄 ...
- 二:apache的Qpid消息中间件介绍
一:什么是Qpid?--->Qpid 是 Apache 开发的一款面向对象的消息中间件,它是一个 AMQP 的实现,可以和其他符合 AMQP 协议的系统进行通信.--->Qpid 提供了 ...
- 【Python】python2.7 安装配置OpenCV2
环境:Ubuntu16.04 anaconda Python2.7 opencv2.4.13 安装opencv后 import cv2 遇到错误信息: No module named cv2 安装op ...
- POJ3928(树状数组:统计数字出现个数)
Ping pong Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 2641 Accepted: 978 Descript ...
- Spring boot 学习八 Springboot的filter
一: 传统的javaEE增加Filter是在web.xml中配置,如以下代码: <filter> <filter-name>TestFilter</filter-nam ...
- SQL一次性插入大量数据【转载】
在SQL Server 中插入一条数据使用Insert语句,但是如果想要批量插入一堆数据的话,循环使用Insert不仅效率低,而且会导致SQL一系统性能问题.下面介绍SQL Server支持的两种批量 ...
- Windows下git的安装与配置
表示git安装成功.
- 利用oracle session context 向oracle传值
有时候,我们在执行数据库请求时,需要向数据库传一些应用程序的上下文信息,比如当前应用的用户.举个场景,我们要通过触发器记录对某些关键表的修改日志,日志包括修改的表,字段,字段的值,修改的时间,当然非常 ...
- mysql由浅入深探究(四)----mysql事务详解
什么是事务: 通俗的解释就是对数据库进行的一组完整的操作,这组完整的操作中包含一个或多个操作.解释的太low了,来点官方的:事务就是DBMS中执行的一个完整的逻辑单元,这个逻辑单元中包含一个或者多个操 ...
- 原生js实现一个侧滑删除取消组件(item slide)
组件,本质上是解决某个问题封装的类,在此记录原生js实现侧滑删除 先上效果图 实现思路 1. 确定渲染的数据结构 2. 思考划分布局,总的有两个主要的模块:内容区域和按钮区域 2.1 内容区域保持宽度 ...