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解決方案。