How to use LESS

Topics: Writing themes
Feb 3, 2012 at 5:46 PM

I'm thinking about using LESS for a theme I'm working on (

In order to do this though, I have to include a main .less file. The problem I'm having is that I can't seem to figure out where to place it in the file structure so that it can be accessed. I'm assuming due to it's file extension that it's not allowed to be read. I attempted putting it in the Content folder of the theme, but it was still rejected.

Is there a way I can modify the web.config in the Content folder of my theme to allow reading of these files? They're straight text, like a .css or .js file.

Thanks =)

Feb 4, 2012 at 9:55 AM

LESS looks really cool, I like this idea. It has a server-side component, so it might be worth considering using that to parse .less files, then use a route and controller to fake a .css extension and MIME type. As a bonus this should mean faster page loads than with the client-side version.

However, to get .less files accessible client-side, the problem is MIME configuration - the web server simply doesn't understand the .less extension so it won't serve it under any circumstances. You can configure MIME in IIS, or a hosting CP, and additionally you could try configuring the Web.config in the appropriate folder of your theme (personally I'd recommend /Styles since, well, that's what they are). This article shows how to add MIME types in Web.config:

Feb 7, 2012 at 5:33 PM

To get less to work on the server side with Orchard features you'll need to a do a few things:

1) You need to get DotLess to translate your less files into css, you can do this with a web config in your Styles folder. This also changes the result mime type to text/css so IIS will serve them. (you'll also need dotless.core.dll to be present in Orchards bin folder)

<?xml version="1.0" encoding="UTF-8"?>
    <section name="dotless" type="dotless.Core.configuration.DotlessConfigurationSectionHandler, dotless.Core" />
  <dotless minifyCss="true" cache="false" />
    <add key="webpages:Enabled" value="false" />
      <!-- iis6 - for any request in this location, return via managed static file handler -->
          type="System.Web.StaticFileHandler" />
    <handlers accessPolicy="Script,Read">
      iis7 - for any request to a file exists on disk, return it via native http module.
      accessPolicy 'Script' is to allow for a managed 404 page.
          verb="*"  />
          requireAccess="Read" />

2) Second you'll need to override the StylesheetBindingStrategy (which is a kind of IShapeTableProvider) and replace it with one that won't ignore an include or require with a .less extension, because the default one only creates shapes (Yes Orchard renders stylesheet link tags with shapes) for files it can find with .css extensions. The one I am working with now is a hack (I won't lie), it simply re-performs the css shape building step except looking for .less files. It does this AFTER the css files so any include or require that has a .less and .css version (I am talking to you Web Workbench Users) gets the .less version.  

I am actually prepping a DotLess module for the Gallery, look for that in the coming days...

Feb 8, 2012 at 5:01 PM