Node.js + Express.js。如何渲染较少的CSS？

Question

我无法在快速工作区渲染较少的css。
这里是我当前的配置（我的CSS /减档在'公共/柱花草/'）：

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; 
    } 
} 

，这里是我的goodies.less CSS：

.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安装了一些，我从另一篇文章中听说@imports应该引用.css而不是.less。在任何情况下，我已经尝试组合的切换.less为.css在玉和更少的文件没有成功。

如果您可以提供帮助或有解决方案，我将不胜感激。

注意：玉的部分工作正常，如果我输入任何醇'.css。
注2：如果我通过命令行使用lessc，则编译较少。

Answer 1

天哪，这些东西在路径工作方式上是非常不一致的，但是我发现了如何让它起作用。

第一个问题是你的路径，既compiler和staticProvider，编译器需要使用/public，并将钩入下面的所有请求。如果你不这样做，编译器会尝试使用像/public/stylo/stylo这样的路径。

第二个问题在于文件中的@import以及编译器较少且不处理相对导入的事实。

在main.less中使用@import "/public/stylo/goodies.css";将使其工作。

建档的错误的相对路径问题与less：
https://github.com/cloudhead/less.js/issues/issue/177

Answer 2

的问题是，如果它的mtime改变时，编译器只编译文件。

比方说你有：

// A.less 
@import "B.css"; 

和

// B.less 
body { 
    background: #f00; 
} 

我现在我修改B.less，A就不会被重新编译！

我有一个等待几个月的请求，你可以使用我的fork编译器而不是master。

https://github.com/senchalabs/connect/pull/167

Answer 3

两个项目，从而使您的生活更轻松

1. Buildr: The (Java|Coffee)Script and (CSS|Less) (Builder|Bundler|Packer|Minifier|Merger|Checker)

2. Less4Clients: Express.js extension to render LessCSS (.less) files server-side :)

Answer 4

如果你想运行如下输出的CSS，我发现，内置com （来自连接模块）没有压缩选项。所以，而不是为它编写我自己的中间件编译器。我在我的应用程序中覆盖了连接少的编译器。

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'] })); 

Answer 5

我已经发表了package on GitHub called node-kickstart-example它采用启用玉模板渲染和少stylesheet处理一个方便的预配置的快递。使用NPM安装kickstart，放在views/和你的玉模板，并在assets/styles/你少的文件你的好去...被列入kickstart

马特·塞恩对产生压缩的CSS文件以少Express解决方案。