Lesscss and ASP.NET MVC

Question

Since switching my site from ASP.NET WebPages to MVC4, I'm having trouble with Lesscss.

CSS + Javascript lines:

<link href="@Url.Content("~/Content/site.css")" rel="stylesheet/less" type="text/css" />
<script src="@Url.Content("~/Scripts/less-1.3.0.min.js")" type="text/javascript"></script>

I have NO idea what is wrong. The paths are correct. The stylesheet works when you drop the '/less' from the CSS link to use it normally. When trying to use the Lesscss JS file, it loads fine BUT no sylesheet is loaded. F12 dev tools in IE also confirm that the stylesheet is not being loaded.

Has anyone else had similar issues when using Lesscss with MVC4?

Answer 1

In my opinion, a simple way to set this up better is using nuget. You don't have to use nuget but it just makes things so easy.

1. Install dotless using nuget.
2. Install System.Web.Optimization.Less using nuget.

3. Add your bundle

   bundles.Add(new LessBundle("~/Content/less")
                   .Include("~/Content/less/more.less"));
   

4. Reference the bundle

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

5. Done

Answer 2

You should specify the mime type for the less file extension in your web.config and use that in your link instead if css.

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

Personally I thing using dotless and processing this on the server is a better way to go.

Also, not really an answer to your question, but just a side point -- with MVC4 you no longer need @Url.Content(). http://www.davidhayden.me/blog/asp.net-mvc-4-the-new-tilde-slash-feature-in-razor-2