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…