任何人都有一个真正新手指向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;
}
据我了解,编译应该在启动时发生,并且将在src
- dir中生成css文件,因为未指定dest。
我的服务器运行正常,但无论我尝试使用LESS / SASS文件的dirnames,目录和名称(以及它们各自的LESS / SASS内容)的方式,我都无法解决这个问题。该死!帮助
答案 0 :(得分:13)
我也是一个想要获得此设置的新手。我已经尝试了一些我发现的片段,直到我终于注意到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'));
});
答案 1 :(得分:2)
您的设置是readymade的标准设置。确保您的系统上安装了较少的编译器。
npm install lessjs readymade
然后将以下内容添加到您的server.js
app.use(require('readymade').middleware({root: "public"}));
答案 2 :(得分:1)
这是一个类似的问题: Node.js + Express.js. How to RENDER less css?
您还可以查看ExpressJS Website
上的指南答案 3 :(得分:0)
两个可以让您的生活更轻松的项目
答案 4 :(得分: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