6

使用 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 自动编译？

如果这很重要，我正在使用主管来监控更改。

4

2 回答 2

8

中间件按照它们附加到应用程序的顺序执行。node-sass中间件仅将文件编译为scss，css不为它们提供服务。static中间件能够为编译后的文件提供服务css，但是，只要css文件尚未编译，它就不能这样做。如果您切换static和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. sasscss注意到对文件的请求。如果 dest 文件 ( __dirname + '/public' + '/style.css') 是最新的，则它什么也不做。否则，它会查找 src 文件 ( __dirname + '/public/sass' + '/style.scss') 并编译它（如果存在）。
  2. static注意到对静态资产的请求。如果请求的文件 ( path.join(__dirname, 'public') + '/style.css') 确实存在，则提供该文件。
于 2013-08-08T07:16:08.240 回答
0

在使用 Koa (koa.js) 和 koa-sass 进行设置时，我也遇到了严重的问题。最终我发现了问题所在。node-sass 本身就“太聪明了”：

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

当它尝试访问时，我得到了 500 /public/sass/stylesheets/styles.css- 但我的路径中没有“样式表”：我的 html 模板文件正在查看，/stylesheets/styles.css所以我不得不删除前缀prefix: '/stylesheets'。

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

一旦我用有效的 css 或 scss 文件替换它，它就会使用 koa-static 编译和渲染。

虽然这是一个 koa-sass 问题，但 koa-sass 只是用生成器包装了 node-sass，所以它属于这里（IMO）。

于 2014-07-14T21:55:26.770 回答