express.js less compiler: can not get work

Question

app.js:

app.use(express.compiler({ src: __dirname + '/public', enable: ['less']}));
app.use(express.static(__dirname + '/public'));

In my jade view:

link(rel="stylesheet", type="text/css", href='/app/stylesheets/app.less)

I've got less file in: public/app/stylesheets/app.less

When I request the page I've got in html head:

<link href="/app/stylesheets/app.less" type="text/css" rel="stylesheet">

And noting in server console.

1) So Why does express even doesn't try to compile app.less? Should it?

2) If everything right: should link in htm be

<link href="/app/stylesheets/**app.less**" ... >

or express should change the file's extension while render?

<link href="/app/stylesheets/**app.css**" ... >

?

Answer 1

It seems that compiler() was removed from connect and it won't be supported anymore, according to TJ Holowaychuck (creator of Connect & Express):

https://github.com/visionmedia/express/issues/877

---

Update 2013-01-16

As of Express 3.0.0 the framework now includes less-middleware instead of the compiler middleware that used to be in Connect. It works much the same way as the old middleware.

To add it to an existing project, add less-middleware to your package.json and run npm install then add the following to your config:

app.use(require('less-middleware')({ src: __dirname + '/public' }));
app.use(express.static(path.join(__dirname, 'public')));

In your Jade template you reference it as a normal CSS file:

link(rel='stylesheet', type='text/css', href='css/styles.css')

Your directory structure will look something like this:

myapp
+-public
  +-css
    +-styles.less

less-middleware will look for .less files that have the same name as the .css file that was requested. If it finds one it will compile it and server the resulting CSS.

You'll probably want to exclude compiled CSS files from your source control. If you're using Git you can add .css to your .gitignore file.

Answer 2

You can get LESS compiling to work via middleware, the same way that Stylus currently works.

Edit: Instead of trying to get the [pull request][0] into the main LESS repository it was decided to just do it as a separate package.

Here is how you can use the LESS.js middleware:

var lessMiddleware = require('less-middleware');

var app = express.createServer();

app.configure(function () {
    // Other configuration here...

    app.use(lessMiddleware({
        src: __dirname + '/public',
        compress: true
    }));

    app.use(express.static(__dirname + '/public'));
});

In your jade file you should then be able to use the reference to the css file:

link(rel="stylesheet", type='text/css', href='/app/stylesheets/app.css')