Node.js + Express.js。 如何渲染较less的CSS？
我无法在我的快速工作区中呈现较less的CSS。
这是我目前的configuration（我的css / less文件在'public / stylo /'） ：
app.configure(function() { app.set('views' , __dirname + '/views' ); app.set('partials' , __dirname + '/views/partials'); app.set('view engine', 'jade' ); app.use(express.bodyDecoder() ); app.use(express.methodOverride()); app.use(express.compiler({ src: __dirname + '/public/stylo', enable: ['less']})); app.use(app.router); app.use(express.staticProvider(__dirname + '/public')); }); 这是我的main.jade文件 ：
!!! html(lang="en") head title Yea a title link(rel="stylesheet", type="text/css", href="/stylo/main.less") link(rel="stylesheet", href="http://fonts.googleapis.com/cssfamily=Droid+Sans|Droid+Sans+Mono|Ubuntu|Droid+Serif") script(src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js") script(src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js") body!= body
这里是我的main.less css ：
@import "goodies.css"; body { .googleFont; background-color : #000000; padding : 20px; margin : 0px; > .header { border-bottom : 1px solid #BBB; background-color : #f0f0f0; margin : -25px -25px 30px -25px; /* important */ color : #333; padding : 15px; font-size : 18pt; } }
这里是我的好东西 。
.rounded_corners(@radius: 10px) { -moz-border-radius : @radius; -webkit-border-radius: @radius; border-radius : @radius; } .shadows(@rad1: 0px, @rad2: 1px, @rad3: 3px, @color: #999) { -webkit-box-shadow : @rad1 @rad2 @rad3 @color; -moz-box-shadow : @rad1 @rad2 @rad3 @color; box-shadow : @rad1 @rad2 @rad3 @color; } .gradient (@type: linear, @pos1: left top, @pos2: left bottom, @color1: #f5f5f5, @color2: #ececec) { background-image : -webkit-gradient(@type, @pos1, @pos2, from(@color1), to(@color2)); background-image : -moz-linear-gradient(@color1, @color2); } .googleFont { font-family : 'Droid Serif'; }
很酷的交易。 现在： 我已经通过npm安装了一些 ，我从另一个post听说@import应该引用.css而不是.less 。 无论如何，我已经尝试过在玉石中切换.less的组合 ，less了没有成功的文件。
如果你能帮忙或者有解决办法，我将不胜感激。
注意：如果我input任何醇' .css玉的部分工作正常。
注2：如果通过命令行使用lessc，则编译的次数会减less。
天哪，这些东西在path的工作方式上是非常不一致的，但是我发现你如何才能使它工作。
第一个问题是你的path，无论是compiler和staticProvider ，编译器需要使用/public ，并将挂钩到下面的所有请求。 如果你不这样做，编译器会尝试使用/public/stylo/stylo这样的path。
第二个问题在于main.less文件中的@import ，以及less编译器是愚蠢的并且不处理相对导入的事实。
使用@import "/public/stylo/goodies.css"; 在你的main.less将使其工作。
用相对less的相对path问题提交了一个Bug：
https://github.com/cloudhead/less.js/issues/issue/177
如果你想缩小输出的CSS，我发现内置的编译器（从连接模块）缺less压缩选项。 所以，而不是写它自己的中间件编译器。 我覆盖了我的应用程序连接less编译器。
var express = require('express'); var app = express.createServer(); var less; express.compiler.compilers.less.compile = function (str, fn) { if (!less) less = require("less"); try { less.render(str, { compress : true }, fn); } catch (err) { fn(err); } }; app.use(express.compiler({ src: publicdir, enable: ['less'] }));
问题是如果编译器的mtime被改变，编译器只编译文件。
可以说你有：
// A.less @import "B.css";
和
// B.less body { background: #f00; }
我现在修改B.less ，A不会被重新编译！
我有一个拉请求等待几个月，你可以使用我的叉编译器，而不是主。
两个项目，可以让你的生活更轻松
-
Buildr：（Java | Coffee）脚本和（CSS | Less）（Builder | Bundler | Packer | Minifier | Merger | Checker）
-
Less4Clients：Express.js扩展，呈现LessCSS（.less）文件服务器端:)
我已经在GitHub上发布了一个名为node-kickstart-example的软件包，它使用了一个预先configuration好的express，并且启用了jade模板渲染和更less的样式表处理。 使用npm来安装kickstart ，把你的jade模板放在views/ ，把你的less量文件放到assets/styles/然后你就可以开始了。
马特Sain的解决scheme，包括在kickstart包含更less和快速生成压缩的css文件。