Node.js – express – jade – 编译SASS / LESS
任何人都有一个真正的新手指南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方式,我试图搞乱LESS / SASS文件(和他们各自的LESS / SASS内容)的dirnames,目录和名称,我不能得到这个工作。 该死! 帮帮我。
我也是一个试图获得这个设置的新手。 我已经尝试了一些我发现的代码片段,直到我终于注意到express有一个“express”命令来build立一个新的项目。
试用express -c less
来创build一个LESS作为CSS引擎的示例项目。
这应该创build所需的目录。 新的CSS文件将从您的静态目录中提供。
configuration是:
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')); });
您的设置是现成的标准设置。 确保尽可能less的编译器安装在你的系统上。
npm install lessjs readymade
然后将以下内容添加到您的server.js
app.use(require('readymade').middleware({root: "public"}));
这里有一个类似的问题: Node.js + Express.js。 如何渲染较less的CSS?
您也可以查看ExpressJS网站上的指南
两个项目,可以让你的生活更轻松
-
Buildr:(Java | Coffee)脚本和(CSS | Less)(Builder | Bundler | Packer | Minifier | Merger | Checker)
-
DocPad:Express.js应用程序的预处理器提供程序和模板授权者
我正在使用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