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

导致问题的原因似乎是，

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

希望对您有所帮助

Answer 2

我意识到这是一个老问题，可能已经在不久前通过其他方式得到了回答，但我看到了类似的问题，只想回答一下。如果您提供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 <link> URL 的 /css 部分，并允许绝对路径准确地用于 src 和 dest。