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

Question

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

11

有没有一个针对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;
}

据我的理解，编译应该在启动时发生，并且将生成一个 css 文件在 src 目录中，因为没有指定 dest。
我的服务器运行良好，但是无论我如何尝试更改 dirname、directory 和 LESS/SASS 文件的名称（以及它们各自的 LESS/SASS 内容），我都无法使其工作。糟糕！请帮忙。

- Gnimm

当然，让"src"目录可写... F(*&=) - Gnimm

5个回答

2

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

npm install lessjs readymade

然后将以下内容添加到您的server.js文件中：

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

- fulmicoton

1

这里有一个类似的问题：如何在Node.js + Express.js中渲染少量的CSS？你还可以查看ExpressJS官网上的指南。

- Stephen

0

两个能让你的生活更轻松的项目

- balupton

@SamHasler 谢谢你提供的信息，是的，less4client 已被 DocPad 取代。已更新链接以反映这一点。 - balupton

0

我正在使用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。

- Alex Buznik

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- xer0x · Accepted Answer

我也是一个新手，正在尝试设置这个。我尝试了几个片段，直到最后注意到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'));
});