Trouble Using DotLess Module

Topics: Customizing Orchard, General, Writing themes
Jan 30, 2013 at 7:43 PM

Has anyone gotten the DotLess module in the gallery to work with the Bootstrap theme .less files?  I've been trying to set it up for hours, but I couldn't find any documentation on using the DotLess module.  

I have set the bootstrap theme to active and enabled the dotless module. 

I uncommented the Style.Include statement in the Layout:

Style.Include("less/bootstrapless.less"); // LESS implementation *Requires DOTLESS module

I copied the web.config from the DotLess module to both my Styles folder and the Styles/less folder.  What else am I missing?

Here is the web.config I'm using:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <configSections>
    <section name="dotless" type="dotless.Core.configuration.DotlessConfigurationSectionHandler, dotless.Core" />
  </configSections>
  <dotless minifyCss="true" cache="false" />
  <appSettings>
    <add key="webpages:Enabled" value="false" />
  </appSettings>
  <system.web>
    <httpHandlers>
      <!-- iis6 - for any request in this location, return via managed static file handler -->
      <add
          path="*.less"
          verb="*"
          type="dotless.Core.LessCssHttpHandler,dotless.Core"/>
      <add
          path="*"
          verb="*"
          type="System.Web.StaticFileHandler" />
    </httpHandlers>
  </system.web>
  <system.webServer>
    <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.
      -->
      <add
          name="Less"
          type="dotless.Core.LessCssHttpHandler,dotless.Core"
          path="*.less"
          verb="*"  />
      <add
          name="StaticFile"
          path="*"
          verb="*"
          modules="StaticFileModule"
          preCondition="integratedMode"
          resourceType="File"
          requireAccess="Read" />
    </handlers>
  </system.webServer>
</configuration>

Coordinator
Jan 31, 2013 at 12:13 AM
Not a solution per se but have you tried the Combinator module ? It can handle .less files AFAIK.
Jan 31, 2013 at 12:57 AM
You're right there's a fork for .less support:
http://combinator.codeplex.com/SourceControl/network/forks/beny/lesscss

Thank you I'll try it tomorrow.
Jan 31, 2013 at 2:22 AM
An entirely different approach, if you aren't married to using the bootstrap module (but still want to use bootstrap), is to use the Web Essentials visual studio extension. I use bootstrap for Orchard projects and this is the method I use. Web Essentials is free (but Visual Studio isn't), and it compiles .less into .css whenever you save the .less files. It even minifies them. I also use the combinator module.

I use TheMonarch.bootstrap module, which I created. It's not on the Orchard gallery, but it's on github. Just use it as a starting point when I have a new Orchard project, and customize the bootstrap. It's a very development centric way of doing it, but thought I'd put it out there in case it would help others who are trying to use bootstrap with Orchard.
Coordinator
Jan 31, 2013 at 4:17 AM
+1 for statically compiling .less from VS using WebEssentials. It's a fantastic tool, and very well maintained, with regular updates, too.
Jan 31, 2013 at 1:07 PM
The combinator module comes with Less and Sass features as well. It's working like a charm!

I will probably go the Web Essentials route though for simplicity. Thanks for the help everyone!