title: Node.js + Express.js. How to RENDER less css?
body: <p>I am unable to render less css in my express workspace.<br>
  Here is my current configuration <strong>(my css/less files</strong> are in <strong>'public/stylo/')</strong> :</p>
  
  <pre><code>app.configure(function()
  {
      app.set('views'      , __dirname + '/views'         );
      app.set('partials'   , __dirname + '/views/partials');
      app.set('view engine', 'jade'                       );
      app.use(express.bodyDecoder()   );
      app.use(express.methodOverride());
      app.use(express.compiler({ src: __dirname + '/public/stylo', enable: ['less']}));
      app.use(app.router);
      app.use(express.staticProvider(__dirname + '/public'));
  });
  </code></pre>
  
  <p>Here is my <strong>main.jade file</strong> :</p>
  
  <pre><code>!!!
  html(lang="en")
       head
           title Yea a title
           link(rel="stylesheet", type="text/css", href="/stylo/main.less")
           link(rel="stylesheet", href="http://fonts.googleapis.com/cssfamily=Droid+Sans|Droid+Sans+Mono|Ubuntu|Droid+Serif")
           script(src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js")
           script(src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js")
       body!= body
  </code></pre>
  
  <p>here is my <strong>main.less css</strong> :</p>
  
  <pre><code>@import "goodies.css";
  
  body 
  {
      .googleFont;
      background-color     :  #000000;
      padding              :  20px;
      margin               :  0px;
  
      &gt; .header
      {
          border-bottom    :  1px solid #BBB;
          background-color :  #f0f0f0;
          margin           :  -25px -25px 30px -25px; /* important */
          color            :  #333;
          padding          :  15px;
          font-size        :  18pt;
      }
  }
  </code></pre>
  
  <p>AND here is my <strong>goodies.less css</strong> :</p>
  
  <pre><code>.rounded_corners(@radius: 10px)
  {    
      -moz-border-radius   :  @radius;
      -webkit-border-radius:  @radius;
      border-radius        :  @radius;
  }
  .shadows(@rad1: 0px, @rad2: 1px, @rad3: 3px, @color: #999)
  {
      -webkit-box-shadow   :  @rad1 @rad2 @rad3 @color;
      -moz-box-shadow      :  @rad1 @rad2 @rad3 @color;
      box-shadow           :  @rad1 @rad2 @rad3 @color;
  }
  .gradient (@type: linear, @pos1: left top, @pos2: left bottom, @color1: #f5f5f5, @color2: #ececec)
  {
      background-image     :  -webkit-gradient(@type, @pos1, @pos2, from(@color1), to(@color2));
      background-image     :  -moz-linear-gradient(@color1, @color2);
  }
  .googleFont
  {
      font-family          :  'Droid Serif';
  }
  </code></pre>
  
  <p>Cool deal. Now: <strong>I have installed less via npm</strong> and I had heard from another post that @imports should reference the <code>.css</code> not the <code>.less</code>. In any case, I have tried the <strong>combinations</strong> of switching <code>.less</code> for <code>.css</code> in the jade and less files with no success. </p>
  
  <p>If you can help or have the solution I'd greatly appreciate it.  </p>
  
  <p><strong>Note:</strong>  The jade portion works fine if I enter any ol' <code>.css</code>.<br>
  <strong>Note2:</strong> The less compiles if I use lessc via command line.</p>