node-sass-middleware只提供一次css文件 [英] node-sass-middleware only serving css file once

问题描述

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

I've made a really simple Express website that uses Jade and Sass, but I've run into a problem with my node-sass middleware. My server only serves a CSS file once, and then returns a 404 for every subsequent request. I have to restart the server to temporarily fix it. Here's my code; the server seems to be hang after outputting the css file (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

日志的前4行是我的形式第一个请求和接下来的两个请求来自我的第二个请求（刷新页面）失败。

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

最后，这是我的Jade模板

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

谢谢！

推荐答案

导致问题的原因是，

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 肯定不存在（尝试创建这样的目录，你肯定知道）

Now CSS has been transpiled it is now static, so now internally express call your src as /public/public/styles/main.css which surely doesn't exist (try creating directory like this and you'll know for sure)

您的代码解决方案很简单，

solution to your code is simple,

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

并更改链接 src to

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

希望这能帮助很多像我这样的人，我只花了4个小时试图解决这是为了我自己，我在这里。
此外，我建议您使用 serve-static 而不是 express.static（） ，当我在上测试它时，服务静态这里是包含它的代码，

Hope this helps lot of other guys like me, I just spent 4 hours trying to fix this for my self and here I'm. Further I'd like to suggest that you use serve-static instead of express.static(), as I tested it on serve-static here is the code to include it,

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

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

希望这有帮助

这篇关于node-sass-middleware只提供一次css文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！