使用NodeJS Express和node-sass获取SASS以自动编译

Question

我正在使用node.js进行开发,而不是编写css而是想编写每次刷新页面时自动编译的SCSS文件.

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

Answer 1

更新(2014年12月7日)

来自node-sass的连接中间件已被提取到node-sass-middleware中,请参阅此答案

安装node-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).

重启您的应用

您必须重新启动应用才能进行这些更改.

将它包含在某处以便编译

我们现在可以包含app.scss在我们的/sass文件夹中 但它还不会编译.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`

请注意,与子文件夹style.css下的不同,从根读取(在本例中).stylesheetsapp.css/public

修复路径

同

  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中间件配置更改为

  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中间件以下配置:

src: __dirname + '/sass',

它会去寻找/sass/stylesheets/app.scss,并且不存在这样的文件.

一种解决方案是保持配置不变,但将所有sass文件放在子文件夹`/ sass/stylesheets /中.但是有一个更好的解决方案.

如果您像这样定义前缀配置:

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

Answer 2

来自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')));