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

我做了一个非常简单的使用Jade和Sass的Express网站，但是我遇到了我的节点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 

日志的前四行是我的第一个请求，接下来的两个是从我的第二个请求（刷新页面）失败。

最后，这是我的Jade模板

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

谢谢！

Answer 1

我意识到这是一个古老的问题，可能已经用其他方法已经回答了，但是我也看到了类似的问题，只是想回答logging。 如果你正在提供public文件夹，那么你的文件path实际上应该是/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链接本身交互。 每当请求一个静态文件时，它会查看它所在的文件path，并将其粘贴到src和dest URL的末尾。 这是如果你根本没有定义一个prefix选项。

没有prefix ：

带prefix ：

prefix只是简单地忽略了CSS <link> URL的/css部分，并且允许绝对path对于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已经被转换，现在是静态的，所以现在内部/public/public/styles/main.css调用你的src作为/public/public/styles/main.css ，它肯定不存在（尝试创build这样的目录，你肯定知道）

解

解决你的代码很简单，

 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个小时，试图解决这个我自己和我在这里。 此外，我想build议您使用serve-static而不是express.static() ，因为我在服务器上testing它是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')); 

希望这可以帮助