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

By : Gnimm

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

By : Gnimm


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 ( does not scan the correct folders,
// so I have both .scss and final .css in one /public/css/ folder
        src: __dirname   '/public/', // where the sass files are 
        dest: __dirname   '/public/', // where css should go

// ... rest of app

Here is a gist for it:

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

By : Stephen

This video can help you solving your question :)
By: admin