使用NodeJS Express和node-sass让SASS自动debugging
我正在开发使用node.js，而不是编写的CSS想编写SCSS文件，每当我刷新页面自动编译。
如何在使用NodeJS，Express和node-sass时使SASS文件自动编译。
更新（2014年12月7日）
来自node-sass的连接中间件已经被提取到node-sass-middleware中 ，看到这个答案
安装节点sass
在你项目文件夹中运行：
$ npm install node-sass 修改app.js
假设你已经生成你的应用程序使用
$ express my_app
你的app.js应该看起来像这样：
var express = require('express'), routes = require('./routes'); var app = module.exports = express.createServer(); app.configure(function(){ app.set('views', __dirname + '/views'); app.set('view engine', 'jade'); app.use(express.bodyParser()); app.use(express.methodOverride()); app.use(app.router); app.use(express.static(__dirname + '/public')); }); ....
这里是修改：
var express = require('express'), routes = require('./routes'), sass = require('node-sass'), // We're adding the node-sass module path = require('path'); // Also loading the path module var app = module.exports = express.createServer(); app.configure(function(){ app.set('views', __dirname + '/views'); app.set('view engine', 'jade'); app.use(express.bodyParser()); app.use(express.methodOverride()); app.use(app.router); // notice that the following line has been removed // app.use(express.static(__dirname + '/public')); // adding the sass middleware app.use( sass.middleware({ src: __dirname + '/sass', dest: __dirname + '/public', debug: true, }) ); // The static middleware must come after the sass middleware app.use(express.static( path.join( __dirname, 'public' ) ) ); });
注意这一点很重要
app.use( sass.middleware ... );
必须在之前
app.use( express.static ... )
原因是我们首先要sass来编译任何已经改变的sass文件，然后才能提供服务（这是通过express.static来完成的）。
重新启动你的应用
您必须重新启动您的应用程序才能进行这些更改。
将其包含在某处以便编译
我们现在可以在我们的/sass文件夹中包含app.scss 。 但目前还不能编译。 sass中间件只会编译你的应用程序所要求的文件，所以我们必须包含（被渲染的）css文件，就像`/views/layout.jade'一样：
doctype html html(lang="en") head title= title link(rel='stylesheet', href='/stylesheets/style.css') link(rel="stylesheet", href="app.css") < we've added this body!= body `/views/layout.jade`
注意，与stylesheets子文件夹下的style.css不同， app.css是从根目录读取的（在本例中是/public ）。
修复path
同
app.use( sass.middleware({ src: __dirname + '/sass', dest: __dirname + '/public', debug: true, }) );
第一次编译之后，文件和文件夹层次结构如下所示：
Project folder app.js public app.css < This is where the compiled file goes sytlesheets style.css sass app.scss < This is where the sass file is
您可能希望在stylesheets文件夹中有编译的输出，而不是public输出。 像这样：
Project folder app.js public sytlesheets app.css style.css sass app.scss
这样，视图将链接到像这样的CSS文件：
link(rel='stylesheet', href='/stylesheets/style.css') link(rel="stylesheet", href="/stylesheets/app.css")
但是，如果您将sass中间件configuration更改为
app.use( sass.middleware({ src: __dirname + '/sass', dest: __dirname + '/public/stylesheets', debug: true, }) );
事情会变成梨形。
当链接到这样的CSS文件：
link(rel="stylesheet", href="stylesheets/app.css")
由此产生的请求将为stylesheets/app.css 。 但是因为我们给了sass中间件以下configuration：
src: __dirname + '/sass',
它会去寻找/sass/stylesheets/app.scss ，并且不存在这样的文件。
一个解决scheme是保持原来的configuration，但是把所有的sass文件放在子文件夹`/ sass / stylesheets /中。 但是有一个更好的解决scheme。
如果你像这样定义一个前缀configuration：
app.use( sass.middleware({ src: __dirname + '/sass', dest: __dirname + '/public/stylesheets', prefix: '/stylesheets', // We've added prefix }) );
它会告诉sass编译器，请求文件总是以/stylesheets为前缀，而这个前缀应该被忽略，因此对于/stylesheets/app.css的请求，sass中间件会寻找/sass/app.scss文件比/sass/stylesheets/app.scss 。
最终的代码
app.js
var express = require('express'), routes = require('./routes'), sass = require('node-sass'), path = require('path'); var app = module.exports = express.createServer(); app.configure(function(){ app.set('views', __dirname + '/views'); app.set('view engine', 'jade'); app.use(express.bodyParser()); app.use(express.methodOverride()); app.use(app.router); app.use( sass.middleware({ src: __dirname + '/sass', dest: __dirname + '/public/stylesheets', prefix: '/stylesheets', debug: true, }) ); app.use(express.static(path.join(__dirname, 'public'))); });
layout.jade
doctype html html(lang="en") head title= title link(rel='stylesheet', href='/stylesheets/style.css') link(rel="stylesheet", href="/stylesheets/app.css") body!= body
文件夹和文件
Project folder app.js public sytlesheets app.css style.css sass app.scss
来自node-sass的连接中间件已经被提取到node-sass-middleware中 。 使用方法如下：
var fs = require('fs'), path = require('path'), express = require('express'), sassMiddleware = require('node-sass-middleware') var app = module.exports = express(); // adding the sass middleware app.use( sassMiddleware({ src: __dirname + '/sass', dest: __dirname + '/src/css', debug: true, }) ); // The static middleware must come after the sass middleware app.use(express.static(path.join(__dirname, 'public')));