Express.js + Less: How to configure properly

This solution does only work for express 2.x.

I have found a solution, this hopefully helps someone:

1. less or less-middleware

I am using less because I have read it is the official port. But not sure what the difference is since there is no documentation available.

2. directory structure:

Your directory structure doesn't matter for less. But it is highly recommended to have a public folder that serves all the static content like JavaScript, , Less, CSS or Image files.

3. App config:

You need two specific things to make less working properly:

First, the compiler, that compiles the less files:

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

And second, show express where to find the static files!

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

Both should point to your public folder!

4. The html

    <link rel="stylesheet" href="/styles/bootstrap.css">

Point directly to your root-less file, that lies somewhere in your public folder.

5. The Less Files

Thanks to this answer I know what went wrong all the time. There is kind of a bug in less.js. It will not find all the less files that you import in your root file. So you have to add the correct path to every import!!!

Replace @import "reset.less"; with @import "/public/styles/reset.less"; for every import you have!

et voilà... :-)

Thank's to everyone who helped with this issue. Also have a look at Wes Johnson's answere. I think he has a very nice solution that somehow didn't work for me...

Per this answer (which I also worked on). First configure your app.js,

app.use(require('less-middleware')({ src: __dirname + '/public' }));app.use(express.static(path.join(__dirname, 'public')));// This is just boilerplate you should already haveapp.use(express.bodyParser());app.use(express.methodOverride());app.use(app.router);

Then simply include the link to the less file except change the extension to css. Like this,

<link rel="stylesheet" href="components/bootstrap/less/bootstrap.css" />

And, that will compile components/bootstrap/less/bootstrap.less to css and serve it to your client.

See the docs on less-middleware for more information on how to do cool stuff like minify automatically.

I've never used less middleware, but I'm not sure how relevant that is for most applications. Most should probably just compile upfront, ie: when you start Node. Could be as simple as this:

var fs      = require('fs'),    less    = require('less');fs.readFile('styles.less', function(err,styles) {    if(err) return console.error('Could not open file: %s',err);    less.render(styles.toString(), function(er,css) {        if(er) return console.error(er);        fs.writeFile('styles.css', css, function(e) {            if(e) return console.error(e);            console.log('Compiled CSS');        });    });});

The directory structure is entirely your preference. I would make use of express.static in serving the compiled CSS file.