使用NodeJS Express和node-sass让SASS自动debugging

我正在开发使用node.js,而不是编写的CSS想编写SCSS文件,每当我刷新页面自动编译。

如何在使用NodeJS,Express和node-sass时使SASS文件自动编译。

       

网上收集的解决方案 "使用NodeJS Express和node-sass让SASS自动debugging"

更新(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')));