Node.js - express - jade - compile SASS/LESS

Question

Anyone have a really newbie guide to nodejs - express - SASS/LESS? I have not been able to get this working. The example I have now is a bareboned as possible..

var express = require('express'),
    less = require('less'),
    app = express.createServer();

var pub_dir = __dirname + '/public';

app.configure(function(){ 
    app.use(express.compiler({ src: pub_dir, enable: ['less'] }));
    app.use(express.staticProvider( pub_dir ));
};

app.configure('development', function(){
    app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});

The file style.css.less is located in pub_dir, I can access that directly, and the styling is

@brand_color: #4D926F;
body {
  color: @brand_color;
}

As far as I understand, the compilation is supposed to happen on start-up, and a css file will be generated in the src-dir, as dest is not specified.
My server runs fine, but regardless of how many ways I have tried messing around with the dirnames, directories and names of the LESS/SASS files (and their respective LESS/SASS content) I cannot get this working. Darn! Help.

Answer 1

I'm also a newb trying to get this setup. I have tried a few snippets I found until I finally noticed that express has an 'express' command that sets up a new project.

Try express -c less to create a sample project with LESS as the CSS engine.

This should create the required directories. The new css files will be served from your static directory.

The configuration is:

app.configure(function(){
  app.set('views', __dirname + '/views');
  app.set('view engine', 'hbs');
  app.use(express.bodyDecoder());
  app.use(express.methodOverride());
  app.use(express.compiler({ src: __dirname + '/public', enable: ['less'] }));
  app.use(app.router);
  app.use(express.staticProvider(__dirname + '/public'));
});

Answer 2

Your setup is the standard setup for readymade. Make sure that less compiler is installed on your system though.

npm install lessjs readymade

And then add the following to your server.js

app.use(require('readymade').middleware({root: "public"}));

Answer 3

Here's a similar question: Node.js + Express.js. How to RENDER less css?

you can also check out the guide on the ExpressJS Website

Answer 4

Two projects which could make your life easier

1. Buildr: The (Java|Coffee)Script and (CSS|Less) (Builder|Bundler|Packer|Minifier|Merger|Checker)

2. DocPad: Pre-processor provider and template empowerer for Express.js apps

Answer 5

I'm working on express 4.x and using SASS. Here is a snippet part I'm using for styles (mind the comments):

var express = require('express'),
    // ... other packages
    sass = require('node-sass');

// ...
var app = express();
// ...
// Commented this default express generator line:
// app.use(require('stylus').middleware(path.join(__dirname, 'public')));
//
// Because of some bug the node-sass (http://git.io/eItWzA) does not scan the correct folders,
// so I have both .scss and final .css in one /public/css/ folder
app.use(
    sass.middleware({
        src: __dirname + '/public/', // where the sass files are 
        dest: __dirname + '/public/', // where css should go
    })
);

// ... rest of app

Here is a gist for it: http://git.io/Vr9KJA