node-sass-middleware只提供一次css文件

Question

我创建了一个非常简单的使用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

谢谢！

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

<强>加成：

serveStatic将始终在/css/my_css_file.css处提供此功能，但问题在于中间件如何与HTML链接本身进行交互。每当请求静态文件时，它都会查看它所带来的文件路径，并将其粘贴到src和dest URL的末尾。如果您根本没有定义prefix选项，那就是这样。

没有prefix：

使用prefix：

prefix只会忽略我的CSS /css网址的<link>部分，并允许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'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'));

希望这会有所帮助