Node.js - express - jade - 编译 SASS/LESS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4344785/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Node.js - express - jade - compile SASS/LESS
提问by Gnimm
Anyone have a reallynewbie guide to nodejs - express - SASS/LESS? I have not been able to get this working. The example I have now is a bareboned as possible..
任何人都有一个真正的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 }));
});
The file style.css.lessis located in pub_dir, I can access that directly, and the styling is
该文件style.css.less位于pub_dir，我可以直接访问它，并且样式是
@brand_color: #4D926F;
body {
color: @brand_color;
}
As far as I understand, the compilation is supposed to happen on start-up, and a css file will be generated in the src-dir, as dest is not specified.
My server runs fine, but regardless of how many ways I have tried messing around with the dirnames, directories and names of the LESS/SASS files (and their respective LESS/SASS content) I cannot get this working. Darn! Help.
据我了解，编译应该在启动时进行，并且在src-dir中会生成一个css文件，因为没有指定dest。
我的服务器运行良好，但无论我尝试了多少种方式来处理 LESS/SASS 文件（以及它们各自的 LESS/SASS 内容）的目录名、目录和名称，我都无法使其正常工作。该死！帮助。
回答by xer0x
I'm also a newb trying to get this setup. I have tried a few snippets I found until I finally noticed that express has an 'express' command that sets up a new project.
我也是一个试图获得此设置的新手。我尝试了一些我发现的片段，直到我终于注意到 express 有一个“express”命令来设置一个新项目。
Try express -c lessto create a sample project with LESS as the CSS engine.
尝试express -c less创建一个使用 LESS 作为 CSS 引擎的示例项目。
This should create the required directories. The new css files will be served from your static directory.
这应该创建所需的目录。新的 css 文件将从您的静态目录提供。
The configuration is:
配置是：
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'));
});
回答by fulmicoton
Your setup is the standard setup for readymade. Make sure that less compiler is installed on your system though.
您的设置是readymade的标准设置。不过，请确保您的系统上安装了 less 编译器。
npm install lessjs readymade
npm install lessjs readymade
And then add the following to your server.js
然后将以下内容添加到您的 server.js
app.use(require('readymade').middleware({root: "public"}));
app.use(require('readymade').middleware({root: "public"}));
回答by Stephen
Here's a similar question: Node.js + Express.js. How to RENDER less css?
这是一个类似的问题： Node.js + Express.js。如何渲染更少的css？
you can also check out the guide on the ExpressJS Website
您还可以查看ExpressJS 网站上的指南
回答by balupton
Two projects which could make your life easier
两个可以让你的生活更轻松的项目
回答by Alex Buznik
I'm working on express 4.x and using SASS. Here is a snippet part I'm using for styles (mind the comments):
我正在使用 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
Here is a gist for it: http://git.io/Vr9KJA
这是它的要点：http: //git.io/Vr9KJA
