Twitter Bootstrap LESS with Node.js & Express Twitter Bootstrap LESS with Node.js & Express express express

Twitter Bootstrap LESS with Node.js & Express


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 haveapp.use(express.bodyParser());app.use(express.methodOverride());app.use(app.router);


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.