I am unable to render less css in my express workspace.

Here is my current configuration (my css/less files are in 'public/stylo/') :

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'));

});

Here is my main.jade file :

!!!

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

here is my main.less css :

@import goodies.css;



body 

{

    .googleFont;

    background-color     :  #000000;

    padding              :  20px;

    margin               :  0px;



    > .header

    {

        border-bottom    :  1px solid #BBB;

        background-color :  #f0f0f0;

        margin           :  -25px -25px 30px -25px; /* important */

        color            :  #333;

        padding          :  15px;

        font-size        :  18pt;

    }

}

AND here is my goodies.less css :

.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';

}

Cool deal. Now: I have installed less via npm and I had heard from another post that @imports should reference the .css not the .less. In any case, I have tried the combinations of switching .less for .css in the jade and less files with no success.

If you can help or have the solution I'd greatly appreciate it.

Note: The jade portion works fine if I enter any ol' .css.

Note2: The less compiles if I use lessc via command line.