LESS + CoffeeScript for ASP.NET = LessCoffee

As documented in recent posts, I’ve been tinkering getting the LESS and CoffeeScript compilers running on Windows Script Host. I’ve now got round to wrapping these up as ASP.NET HTTP Handlers so you can easily use them in ASP.NET-based websites. You simply reference the *.less and *.coffee files and they get served up as CSS and JavaScript directly. For example:

<link href="content/style.less" rel="stylesheet">
<script src="content/site.coffee"></script>

No need to install add-ins into Visual Studio or add build steps to your project. The main downside is that it won’t run on non-Windows platforms under Mono (although I’m tempted adapt it to use Mozilla’s SpiderMonkey JavaScript Shell).

If you’re running Visual Studio 2010 then simply use the LessCoffee NuGet package.

PM> Install-Package LessCoffee

If you’re using Visual Studio 2008 you’ll need follow these manual steps:

  • Copy LessCoffee.dll to your web application’s /bin directory
  • Add the following entries to your web.config file:
    <system.web>
        <httpHandlers>
            <add path="*.coffee" type="DotSmart.CoffeeScriptHandler, LessCoffee" verb="*" validate="false"/>
            <add path="*.less" type="DotSmart.LessCssHandler, LessCoffee" verb="*" validate="false"/>
        </httpHandlers>
    </system.web>

    <!-- IIS 7 -->
    <system.webServer>
        <validation validateIntegratedModeConfiguration="false"/>
        <handlers>
            <add path="*.coffee" type="DotSmart.CoffeeScriptHandler, LessCoffee" verb="*" name="DotSmart.CoffeeScriptHandler"/>
            <add path="*.less" type="DotSmart.LessCssHandler, LessCoffee" verb="*" name="DotSmart.LessCssHandler"/>
        </handlers>
    </system.webServer>

If you’re using Windows 2003/IIS 6 then you will need to map the file extensions *.less and *.coffee to aspnet_isapi.dll.

The source is on GitHub, obv: https://github.com/duncansmart/LessCoffee

12 thoughts on “LESS + CoffeeScript for ASP.NET = LessCoffee

  1. Hi Duncan,

    I was getting sick of duplicating entries all over the place to apply my theme to jqueryUI, so i hit up nuget and typed in “less css” on a whim – and there you were! Worked from the get-go – filled in my config file and everything. Thanks!

  2. While trying to include the jquery-ui theme (by renaming it with a .less extension) so that I could extend/mix some things, I found 2 hickups that prevented it from compiling.

    1) .ui-widget { font-family: “\”Segoe UI\””, Helvetica, Arial, Sans-Serif;
    font-size: 9pt; }

    Getting rid of the “\” on either side of Segoe UI fixed it.

    2) The datepicker IE fix:

    display/**/: block; /*sorry for IE5*/

    Got rid of the /**/ and it was fine.

  3. Hi Duncan,

    Thanks for creating this package. I installed and remove the less.js but the page look like it has no css. I’m not sure that I’m missing.

    I see all the entries in the web.config and the reference to the dll.

    Any clue?

    1. Try browsing to the .less file directly to see if there are any errors being generated. Let me know white they are.

      1. Andrés, can you send me style.less.css (gmail: duncan.smart), to see if I can work out the issue?

  4. Hi Duncan,
    I am trying to learn coffeeScript. But I am having a problem. I couldn’t run coffeescript from coffee file in asp.net. I wrote my problem this page “http://stackoverflow.com/questions/9110405/run-coffeescript-from-coffee-file-in-asp-net”.
    What should I do?

    Thanks

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s