Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Lesscss and ASP.NET MVC

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?

like image 364
Alex Guerin Avatar asked May 28 '12 05:05

Alex Guerin


2 Answers

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

like image 70
BLeB Avatar answered Oct 27 '22 03:10

BLeB


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

like image 9
GeekyMonkey Avatar answered Oct 27 '22 04:10

GeekyMonkey