Using LESS.JS and ASP.NET MVC 4

Published April 26, 2013 | By Adam Craig Johnston

Using LESS.JS with ASP.NET MVC 4 is a great for extending the behaviour of CSS with variables, operations and functions.

There are two ways to use LESS with CSS and ASP.NET MVC 4 either dotlesscss or LESSCSS.JS for this post I will be focusing on LESSCSS.JS because dotlesscss doesn’t support all features of LESS.JS.

IIS

A ?.less? MIME Type must be registered with IIS at the command line with in the IIS directory e.g C:\Program Files (x86)\IIS Express:

appcmd set config /section:staticContent /+[fileExtension='.less',mimeType='text/css']

web.config

Next add the mine type to the web.config of the ASP.NET MVC 4 project:

<system.webServer> 
    <staticContent> 
       <mimeMap fileExtension=".less" mimeType="text/css" /> 
   </staticContent >  
</system.webServer>

Razor Page

Add ?.less? files before the less.min.js to avoid namespace issues and always add the ?less.js? last of your ?.less? files.

<head> 
    <link rel="stylesheet/less" type="text/css" href="@Href("~/Content/theme.less")" /> 
    <script src="@Href("/scripts/less.min.js")"></script> 
</head>

Links

LESS CSS JS
http://lesscss.org/

dotlesscss
http://www.dotlesscss.org/

Add a MIME Type
http://technet.microsoft.com/en-au/library/cc725608%28v=ws.10%29.aspx

Posted in ASP.NET, LESS.JS | Tagged ASP.NET, LESS.JS | Leave a comment