Node.js 让SASS与NodeJS Express和node SASS自动编译

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

使用NodeJS、Express和node-SASS时，如何让SASS文件自动编译。

Update（2014年12月7日）

---

中的连接中间件已提取到，请参阅

---

安装节点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`

第一次编译后，文件和文件夹层次结构如下所示：

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

这样，视图将链接到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")

结果请求将是

样式表/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')));

});

杰德

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

---

中的连接中间件已提取到。使用方法如下：

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

---

您应该在中添加注释，以便用户更容易找到您的宝贵信息：-）@Oliver他们只需再向下滚动一点点即可。如果你觉得我的答案有帮助，你可以投我的赞成票；）@如果里面的细节不正确，请随时编辑我的帖子。（自从发帖以来，我现在用grunt进行sass，所以实际上不再使用我帖子中的代码进行检查！）或者至少在顶部添加一条评论，并将“更新”链接到您的答案。@Izhaki完成。如果你认为这个答案现在更相关，请随意接受。如果答案是正确的，你应该接受你的答案。虽然我现在在这个re@knyan的顶部看到了你的更新，但我最初错过了它。有什么办法让它更突出吗？@Pandem1c，我已经尽力了。谢谢你标记它+1表示“需要注意的是，sassMiddleware必须位于express.static之前”。节省了我大量的时间和精力当我尝试运行sass.middleware时，它说sass.middleware不是一个函数

Project folder
    app.js
    public
        sytlesheets
            app.css
            style.css
    sass
        app.scss

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