Node.js-express-jade-编译 SASS/LESS

Question

有人有 Nodejs - Express - SASS/LESS 的真正新手指南吗？我无法让这个工作。我现在的例子是尽可能简单的。

var express = require('express'),
    less = require('less'),
    app = express.createServer();

var pub_dir = __dirname + '/public';

app.configure(function(){ 
    app.use(express.compiler({ src: pub_dir, enable: ['less'] }));
    app.use(express.staticProvider( pub_dir ));
};

app.configure('development', function(){
    app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});

文件 style.css.less 位于 pub_dir 中，我可以直接访问它，并且样式是

@brand_color: #4D926F;
body {
  color: @brand_color;
}

As far据我了解，编译应该在启动时进行，并且将在 src-dir 中生成一个 css 文件，因为未指定 dest。
我的服务器运行良好，但无论我尝试了多少种方法来弄乱 LESS/SASS 文件的目录名、目录和名称（及其各自的 LESS/SASS 内容），我都无法正常工作。该死！帮助。

Answer 1

我也是一个试图获得此设置的新手。我尝试了一些发现的片段，直到我终于注意到express有一个“express”命令来设置一个新项目。

尝试 express -c less 创建一个使用 LESS 作为 CSS 引擎的示例项目。

这应该创建所需的目录。新的 css 文件将从您的静态目录提供。

配置是：

app.configure(function(){
  app.set('views', __dirname + '/views');
  app.set('view engine', 'hbs');
  app.use(express.bodyDecoder());
  app.use(express.methodOverride());
  app.use(express.compiler({ src: __dirname + '/public', enable: ['less'] }));
  app.use(app.router);
  app.use(express.staticProvider(__dirname + '/public'));
});

Answer 2

您的设置是 readymade 的标准设置。确保您的系统上安装了 less 编译器。

npm install lessjs Readymade

然后将以下内容添加到您的 server.js

app.use(require('readymade').middleware({root: "public"}));

Answer 3

这是一个类似的问题：
Node.js + Express.js。如何渲染更少的 css？

您还可以查看 ExpressJS 网站 上的指南

Answer 4

两个可以让您的生活更轻松的项目

1. Builder：(Java|Coffee)Script 和 (CSS|Less) ) （构建器|捆绑器|打包器|压缩器|合并|检查器）
   

2. DocPad：Express.js 应用程序的预处理器提供者和模板赋能者

Answer 5

我正在研究express 4.x并使用SASS。这是我用于样式的片段部分（注意评论）：

var express = require('express'),
    // ... other packages
    sass = require('node-sass');

// ...
var app = express();
// ...
// Commented this default express generator line:
// app.use(require('stylus').middleware(path.join(__dirname, 'public')));
//
// Because of some bug the node-sass (http://git.io/eItWzA) does not scan the correct folders,
// so I have both .scss and final .css in one /public/css/ folder
app.use(
    sass.middleware({
        src: __dirname + '/public/', // where the sass files are 
        dest: __dirname + '/public/', // where css should go
    })
);

// ... rest of app

这是它的要点： http://git .io/Vr9KJA