Express.js + Less: How to configure properly

Question

I tried modules 'less' and 'less-middleware'. I tried all the different code-snipplets I have found in all the tutorials. There is no documentation available. Can someone please explain how to configue Express.js and Less, so that less is getting precompiled properly?!

Use the following questions as a guideline:

1. Shall you use either the 'less' module or the 'less-middleware' module? What is the official/supported way? What is superior?
2. How should your directory-structure in /public look like? (any specific folders you need? 'styles'/'less'/'css'? or is it up to yourself?)
3. How to configure your express app regarding your directory-structure (from question 2). (static files and compiler options or less-middleware, what directories are important here)
4. How to reference my precompiled stylesheet from the html? (with .less or .css? what reference type? What directory-path?)

Would be so nice if someone could answer that :-)

Answer 1

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

Answer 2

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 have
app.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.

Answer 3

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.