Node-sass-middleware only downloads css file once

Question

I created a really simple Express website that uses Jade and Sass, but I had a problem with my middleware node. My server only serves one CSS file and then returns 404 for each subsequent request. I have to restart the server in order to fix it temporarily. Here is my code; server seems to freeze after css file output (maybe I'm not sure ...)

app.js:

var express = require('express'), sassMiddleware = require('node-sass-middleware');

var app = express();

app.set('views', __dirname + '/views');
app.set('view engine', 'jade');

app.use(
    sassMiddleware({
        src: __dirname + '/public/styles/sass',
        dest: __dirname + '/public/styles',
        debug: true,
        outputStyle: 'compressed',
        prefix: '/public/styles'
    }),
    express.static(__dirname + '/public'),
    express.logger('dev')
);

app.get('/', function(req, res){
    res.render('index', { 
        title: 'Home' 
    });
});

app.listen(3000);

Here is the log from my server:

source: /Users/jasonzhao/Code/Github/isitjoysbirthday/public/styles/sass/main.scss
dest: /Users/jasonzhao/Code/Github/isitjoysbirthday/public/styles/main.css
read: /Users/jasonzhao/Code/Github/isitjoysbirthday/public/styles/main.css
render: /Users/jasonzhao/Code/Github/isitjoysbirthday/public/styles/sass/main.scss

source: /Users/jasonzhao/Code/Github/isitjoysbirthday/public/styles/sass/main.scss
dest: /Users/jasonzhao/Code/Github/isitjoysbirthday/public/styles/main.css

The first 4 lines of the log form my first request, and the next two from my second request (page refresh), which fails.

And finally, here is my Jade template

doctype
html
  head
    title #{title} - isitjoysbirthday
    link(rel='stylesheet', href='/public/styles/main.css')
  body
    .container
      .main-content
        block content

Thank!

Answer 1

, , , , . public, /styles/main.css. prefix /styles, HTML - <link href='/styles/main.css'>.

, .

:

static
  |
  - css
  |
  - scss

:

  app.use(sassMiddleware({
    src: __dirname + '/static/scss',
    dest: __dirname + '/static/css',
    debug: false,
    prefix: '/css',
    outputStyle: 'compressed'
  }));
  app.use('/', serveStatic('./static', {}));

HTML:

<link rel='stylesheet' href='/css/app.css'>

Bonus:

serveStatic /css/my_css_file.css, , HTML-. , , , , URL src dest. prefix.

prefix:

prefix:

prefix /css CSS <link> URL- src dest.

Answer 2

, -, ,

app.use(
    sassMiddleware({
        src: __dirname + '/public/styles/sass',
        dest: __dirname + '/public/styles',
        debug: true,
        outputStyle: 'compressed',

        /*you are removing public here (prefix tells the server that what ever
          request for CSS comes, remove '/public/styles' from it src*/

        prefix: '/public/styles' 

    }),
express.static(__dirname + '/public'),//Now here you are telling it too look
                                      //for all static files in 'public' it will
                                     // prepend '/public' before every static src
express.logger('dev')
);

, CSS, , CSS, . , , node -sass '/public/styles' .

.

CSS , , src /public/public/styles/main.css, , , ( , , )

,

app.use(
    sassMiddleware({
        src: __dirname + '/public/styles/sass',
        dest: __dirname + '/public/styles',
        debug: true,
        outputStyle: 'compressed',

        prefix: '/styles' //remove '/public' from here

    }),
express.static(__dirname + '/public'),
express.logger('dev')
);

link src

link(rel='stylesheet', href='/styles/main.css')

, , , 4 , , . serve-static express.static(), serve-static, ,

//place this where you include node modules
var serveStatic = require('serve-static');

//place following code instead of express.static()
app.use('/', serveStatic('./public'));

,