node-sass 不使用 node / express 编译

Question

我正在尝试让 node-sass 与 express 一起工作，但我根本无法让它进行任何编译。这是我的 app.js 文件：

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

var app = express();

app.configure(function(){
  app.set('port', process.env.PORT || 3000);
  app.set('views', __dirname + '/views');
  app.set('view engine', 'ejs');
  app.use(sass.middleware({
     src: __dirname + '/public/sass',
     dest: __dirname + '/public/stylesheets', 
     debug: true
  }));
  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.configure('development', function(){
  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'));
});

我有public/sass 和public/stylesheets，但无论我在sass 目录中放置什么.scss 文件，都没有编译任何内容。除了node app.js，我还需要做些什么吗？

我真的快要放弃了，只安装 sass gem 并打开一个额外的选项卡来查看目录。

Answer 1

尝试使用前缀选项：

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

Answer 2

我在让 node-sass 中间件工作时遇到了类似的问题。我最终放弃并尝试了asset-rack，直到我开始使用这个叉子之前我也无法开始工作：https://github.com/techpines/asset-rack/pull/76

对资产机架分支的拉取请求已经存在 11 个月感到沮丧，我最终只编写了自己的名为 Electricity 的静态文件中间件，它支持 Sass 以及其他一些不错的功能。

Answer 3

它和 Stylus 中间件一样令人困惑（它说它的灵感来自于它）。

src 的文件夹结构应该模仿目标的最终结构和您用来请求 CSS 文件的路径。如果您希望您的 CSS 文件像这样存储：

./public/stylesheets/app.css

访问文件的 URL 将是：

http://.../stylesheets/app.css

您需要像这样配置中间件：

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

你的 SASS 文件夹结构如下：

./public/sass/stylesheets/app.scss

我相信它是这样工作的：

• 取HTTP请求的路径：/stylesheets/app.css
• 要查找 SCSS 文件，将 URL 路径连接到 src 并替换扩展名：./public/sass/stylesheets/app.scss
• 对于目标，将 URL 路径连接到 dest：./public/stylesheets/app.css