在最新的Node/Express中，Node-sass没有自动编译

Question

使用 node (0.10.15) 和 express (3.3.4)，以及最新的 node-sass，但我无法编译我的 scss 文件。我的 app.js 文件如下：

var express = require('express')
  , routes = require('./routes')
  , user = require('./routes/user')
  , http = require('http')
  , path = require('path')
  , sass = require('node-sass');

var app = express();

// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.cookieParser('your secret here'));
app.use(express.session());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

app.use(
  sass.middleware({
    src: __dirname + '/public/sass',
    dest: __dirname + '/public',
    debug: true,
    outputStyle: 'compressed'
  })
);

// development only
if ('development' == app.get('env')) {
  app.use(express.errorHandler());
}

app.get('/', routes.index);
app.get('/users', user.list);

http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

我需要做什么才能让Sass自动编译？

如果有影响的话，我正在使用supervisor来监控变化。

- bjork24

---

之前/其他版本是否有效？ - Adrian Heine

不是的。我已经转而使用grunt-contrib-compass来使其工作。 - bjork24

Answer 1

中间件按照附加到应用程序的顺序执行。中间件node-sass仅将scss文件编译为css文件，它不会提供服务。静态中间件能够提供已编译的css文件, 但前提是css文件已经编译完成。如果您交换静态和sass中间件，应该可以正常工作：

app.use(
  sass.middleware({
    src: __dirname + '/public/sass',
    dest: __dirname + '/public',
    debug: true,
    outputStyle: 'compressed'
  })
);

app.use(express.static(path.join(__dirname, 'public')));

当你请求/style.css时，会发生以下情况：

1. sass注意到一个css文件的请求。如果目标文件(__dirname + '/public' + '/style.css')是最新的，则不执行任何操作。否则，它会查找源文件(__dirname + '/public/sass' + '/style.scss')并编译它（如果存在）。
2. static注意到静态资源的请求。如果请求的文件(path.join(__dirname, 'public') + '/style.css')存在，则会提供服务。

- Adrian Heine

Answer 2

我在使用Koa（koa.js）和koa-sass时也遇到了严重的设置问题。最终，我找出了问题所在。node-sass太聪明了，以至于它自己都不知道该怎么做：

app.use(sass({
    src: __dirname + '/public/sass',
    dest: __dirname + '/public/css',
    debug: true,
    outputStyle: 'compressed',
    prefix:  '/stylesheets'
}));

当访问/public/sass/stylesheets/styles.css时，我遇到了500错误-但是我的路径中没有“stylesheets”：我的html模板文件正在查看/stylesheets/styles.css，因此我必须使用prefix:'/stylesheets'删除前缀。

接下来，我遇到了scss文件的问题-我不小心复制了一个旧的.styl文件，并且它试图使用nib-在发现debug：true设置后我找到了它。

一旦我用有效的CSS或SCSS文件替换它，就可以使用koa-static编译和渲染了。

虽然这是koa-sass的问题，但是koa-sass只是将node-sass与生成器包装在一起，因此它属于此处（依我之见）。

- Kushal