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.

Of course... make the src directory write-accesible... F(*&=) — Gnimm, Dec 03 '10 at 16:55

xer0x · Answer 1 · 2011-01-03T09:08:25.863

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

Yup, it worked for my sass case. I used following command `express myapp -c sass` Besides creating app with express structure, it also added node-sass-middleware settings to my app. — Faisal Mq, Aug 10 '16 at 08:14

score 2 · Answer 2 · answered Jul 11 '12 at 22:04

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

answered Jul 11 '12 at 22:04

fulmicoton

15,502
9
54
74

score 1 · Answer 3 · edited May 23 '17 at 10:28

1

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

edited May 23 '17 at 10:28

Community

1
1

answered Feb 10 '11 at 00:10

Stephen

7,994
9
44
73

score 0 · Answer 4 · answered Aug 08 '14 at 13:48

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

balupton · Answer 5 · 2012-08-23T00:23:58.520

0

Two projects which could make your life easier

edited Aug 23 '12 at 00:23

answered Aug 17 '11 at 23:56

balupton

47,113
32
131
182

@SamHasler thanks for that, yeah less4client got deprecated in favor of DocPad. Updated the link to reflect that. – balupton Aug 23 '12 at 00:24

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

5 Answers5

Linked