javascript - node-sass-middleware只提供一次CSS文件

我已经做了一个使用Jade和Sass的非常简单的Express网站，但是我遇到了node-sass中间件的问题。我的服务器仅提供一次CSS文件，然后为每个后续请求返回404。我必须重新启动服务器才能临时修复它。这是我的代码；输出css文件后，服​​务器似乎挂起(也许，我不确定。)

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

这是我服务器的日志:

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

日志的前4行是我的第一个请求，后两行是我的第二个请求(刷新页面)，失败了。

最后，这是我的Jade模板

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

谢谢!

最佳答案

造成问题的原因似乎是，

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

希望这对有帮助