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

Answer 1

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 2

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 3

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 4

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

Answer 5

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'));
});