23

Since Twitter Bootstrap 2 is out, I wanted to integrate that into my Node.js project. Unfortunately, there's something wrong with the less compiler and I can't get it to work. I put all files into the public folder and set up a new project with express -c less newproj. and added the lines for less

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

All Node tells me is:

Express server listening on port 3000 in development mode
undefined

On the client side I get a 500 (Internal Server Error) for the bootstrap.css file, which should be compiled by lessc.

lessc bootstrap.less

Works fine.

Anybody knows how to solve the issue?

2
  • What other middleware do you have running? static? Do you know what is logging the undefined to console? Commented Feb 7, 2012 at 10:21
  • Nothing else. It's a completely fresh project and I only changed those two lines and the layout.jade file. No clue where the "undefined" is coming from either.
    – Patrick
    Commented Feb 7, 2012 at 10:27

2 Answers 2

19

For posterity, this has changed a lot in recent Express:

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);
5
  • ok, i've installed less-middleware. my less file (styles.less) is in /public/stylesheets/styles.less --- how do I get styles.css? Commented May 7, 2012 at 1:53
  • @barraponto use href='/stylesheets/styles.css' and the css is automatically generated
    – tofutim
    Commented Jun 21, 2012 at 16:44
  • A little late to the party, but I actually recently created an npm module to easily create an express site with twitter bootstrap. Supports all view engines that express supports, and it also has support for LESS. I plan on adding SASS and STYLUS in the near future as well. It's called quickstrap, you can grab it here: npmjs.org/package/quickstrap
    – BFree
    Commented Feb 3, 2013 at 5:10
  • Thank you for showing where to place the less-middleware and static lines, I had them at the end after app.router, and it did not work until I did it in the same order as your answer.
    – Dan Ross
    Commented Feb 9, 2013 at 2:15
  • 3
    Thank you, those static middleware also need to precede app.use(app.router); — important! :-)
    – Azat
    Commented Sep 29, 2013 at 4:04
11

Ok, here is what I have found for you. First you need both the compiler and the static middleware. The compiler compiles your less and recompiles on changes, the static middleware does the actual serving of the css

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

Second, for some reason when the compiler runs it is losing the current path information, so it can't find the includes. So I had to go through the bootstrap.css and add the path to each import.

@import "/public/stylesheets/reset.less";

This is clearly odd, I am going to dig into it further.

Edit: While odd, a deep look through the code shows me no simple way around it. A bit more searching found this pull request on the connect repo https://github.com/senchalabs/connect/pull/174 which offers a fix for this, but the devs don't seem to want it.

There are also some workarounds in that thread, but it seems the best idea is to absolute path your includes.

1
  • See @GoldenBoy's solution for an update on this. You should use less-middleware.
    – tofutim
    Commented Jun 21, 2012 at 16:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.