How do you install SASS with Express?

Question

I am creating a node.js app with Express and socket.io. I want to use SASS and I see there is a npm package for it, what I don't understand is how do I link between the SASS npm and the app and make it parse the SASS?

UPDATE: I used SASS middleware https://github.com/andrew/node-sass installed it and included it the following way:

  sass = require('node-sass');


app.configure(function(){
  app.set('port', process.env.PORT || 3000);

  /* other stuff */

  sass.middleware({
    src: __dirname + '/public/stylesheets/sass',
    dest: __dirname + '/public/stylesheets',
    debug: true
  });
});

But it still doesn't work

Not exactly what the OP asked for (hence not an answer), but for posterity, Express provides a generator through the `express-generator` package, and you can run `express --css compass` and the generator will automatically set up Express with Compass. I see little reasons to use Sass but not Compass. — d4nyll, Apr 03 '15 at 07:57

score 29 · Accepted Answer · edited Jun 26 '13 at 13:50

29

You need to use the sass middleware, for example this one.

Quoting from docs:

var server = connect.createServer(
   sass.middleware({
       src: __dirname
       , dest: __dirname + '/public'
       , debug: true
    }),
   connect.static(__dirname + '/public')
);

in case of using express, just add:

 app.use(
     sass.middleware({
         src: __dirname + '/sass', //where the sass files are 
         dest: __dirname + '/public', //where css should go
         debug: true // obvious
     })
 );

to your app.configure() call.

Of course on production systems it's a better idea to precompile sass to css.

update

In the example above the middleware will look for sass files in __dirname + '/sass/css'. Also by default it looks for files with .scss extension. There doesn't seem to be an option to change the extension.

edited Jun 26 '13 at 13:50

nialna2

2,056
2
25
33

answered Jan 09 '13 at 17:08

soulcheck

36,297
6
91
90

thanx, if I don't put the `sass.middleware` inside `createServer` where do I put it? – ilyo Jan 09 '13 at 17:44
2

inside `app.configure` call or wherever you have your middleware configured – soulcheck Jan 09 '13 at 17:46
1

if you're not sure where it is, look for `app.use` calls – soulcheck Jan 09 '13 at 17:46
where do I put the SASS file? – ilyo Jan 09 '13 at 17:57
1

@IlyaD in the directory pointed to by `src` property in middleware configuration (`/sass` subdirectory in your web app root) – soulcheck Jan 09 '13 at 17:58
1

I used `dest: __dirname + '/public/stylesheets/sass',` and nothing happens.. I'm new to Express, so is there something I'm missing? How do I know it even tries to compile it? (and thanx for the help :) – ilyo Jan 09 '13 at 18:01
1

@IlyaD use that as src. dest is where compiled css go. – soulcheck Jan 09 '13 at 19:31
still no joy, I updated the question. It is suppose to compile on page request, right? – ilyo Jan 09 '13 at 20:34
thanx! so this means I can only use SCSS and not SASS? – ilyo Jan 09 '13 at 21:22
1

@IlyaD i didn't try but looking at the code and knowing it's a binding to libsass it's just the extension. But it's best to simply try. – soulcheck Jan 09 '13 at 21:29
1

I *just* (5 minutes ago) emailed the creator of libsass, and he confirmed that libsass does not handle the indented SASS syntax. So, yes, SCSS is the only option at present. – juanpaco Jun 27 '13 at 22:51
1

Is there a way to set ``source`` to not append ``/css``? ``source`` is set to ``/Users/username/project/public/sass/css/style.scss``, with ``/css`` appended. – user1429980 Jul 19 '13 at 22:49
@user1429980: Finally figured out how to do that: The reason /css is appended is because that's what you request in the html: ``. This requests the `css/style.css` file, which invokes the compiler on `scss/css/style.css`. Instead, if you change the link to ``, and change the src to include "/css", things will all work as you want. – Achal Dave Sep 24 '13 at 06:35
Hm, I take that back. Now the SCSS compiler will run on the right file, but you'll get a 404 since express will look for `style.css` in `public/style.css` instead of `public/stylesheets/style.css`... Not sure if there's an easy way to fix this. – Achal Dave Sep 24 '13 at 06:37
@AchalDave, but that would not be maintainable if you to removed the sass middleware... not a good solution. – user1429980 Sep 27 '13 at 05:25
1

@soulcheck is there a significant overhead to using a middleware for compiling SCSS instead of compiling them via grunt or other tools in advance? My concern is if Express middleware will try to check if there have been any SCSS changes on every single request. – Sahat Yalkabov Jan 11 '14 at 04:02
1

@user1429980, the appending of /css happened to me as well. The trick (which I figured out by looking at the node-sass source code) is to include [the prefix option](https://github.com/andrew/node-sass#connectexpress-middleware) for node-sass. Prefix gets cut out of the requested path, so eg. with prefix /css a request to /css/style.css gets "processed" as /style.css. Seems irrelevant, but it's worth trying. At least it fixed the problem for me. – cido Apr 20 '14 at 10:53
Sass middleware has moved to https://github.com/sass/node-sass-middleware – ypicard Jan 23 '19 at 11:31

score 11 · Answer 2 · edited Jul 12 '18 at 07:21

11

If you are using express-generator Then try

express --view=ejs --css=sass

edited Jul 12 '18 at 07:21

Djave

8,595
8
70
124

answered Sep 03 '17 at 10:10

Devendra Madheshiya

131
1
4

score 4 · Answer 3 · answered Oct 09 '14 at 12:00

Here is a solution based on various sources including the threads/comments above:

node:

var connect = require('connect');
var sass = require('node-sass');

var srcPath = __dirname + '/sass';
var destPath = __dirname + '/public/styles';

var server = connect.createServer(
    sass.middleware({
        src: srcPath,
        dest: destPath,
        debug: true,
        outputStyle: 'expanded',
        prefix: '/styles'
    }),
    connect.static(__dirname + '/public')
);

html:

<!DOCTYPE html>
    <html>
    <head>
         <link rel="stylesheet" type="text/css" href="styles/main.css">
etc

file system:

rootDirectory / server.js (this is the node app)

rootDirectory / public / styles / (this is where the compiled scss files will appear)

rootDirectory / sass / main.scss

This works for me and I've forked the example at:

node-sass-example

here:

node-sass-example using prefix

Pull-request was accepted so the node-sass-example should reflect my changes now. — swervo, Oct 09 '14 at 12:54

score 3 · Answer 4 · answered Feb 24 '19 at 17:14

Looks like implementation has changed a bit for Express. I had to do this instead:

npm install node-sass-middleware --save

then

var sass = require('node-sass-middleware');

 app.use(
     sass({
         src: __dirname + '/sass',    // Input SASS files
         dest: __dirname + '/public', // Output CSS
         debug: true                
     })
 );

How do you install SASS with Express?

4 Answers4

Linked