Node.js + Express.js. ¿Cómo RENDER menos CSS?

Question

No puedo renderizar menos CSS en mi área de trabajo express.
Aquí está mi configuración actual (mis css/menos archivos están en 'público/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')); 
}); 

Aquí está mi archivo 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 

aquí está mi 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; 
    } 
} 

Y aquí es mi 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'; 
} 

mucho frío. Ahora: He instalado menos a través de npm y había escuchado de otra publicación que @imports debería hacer referencia al .css, no al .less. En cualquier caso, he intentado las combinaciones de .less de conmutación para .css en el jade y menos archivos sin éxito.

Si puede ayudar o tener la solución, lo agradecería mucho.

Nota: La parte de jade funciona bien si ingreso cualquier número .css.
Note2: Menos compila si uso lessc a través de la línea de comandos.

Answer 1

Gosh, esas cosas son muy inconsistentes en cómo funcionan los caminos, sin embargo, descubrí cómo puedes hacer que funcione.

El primer problema es con sus caminos, tanto compiler y staticProvider, compilador necesita utilizar /public y es enganchará a todas las solicitudes que a continuación. Si no lo hace, el compilador intentará usar una ruta como /public/stylo/stylo.

El segundo problema radica en el archivo @import en main.less y el hecho de que menos compilador es estúpido y no maneja las importaciones relativas.

El uso de @import "/public/stylo/goodies.css"; en su main.less lo hará funcionar.

envió un bug para la edición de ruta relativa con less:
https://github.com/cloudhead/less.js/issues/issue/177

Answer 2

El problema es que el compilador sólo compila el archivo si se cambia su -mtime.

digamos que usted tiene:

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

y

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

ahora modifico B.less, A no se volverá a compilar!

Tengo una solicitud de extracción en espera desde hace meses, puede utilizar mi compilador de fork en lugar del maestro.

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

Answer 3

dos proyectos que podrían hacer la vida más fácil

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

Si desea minify la CSS como salida, he encontrado que el integrado en com piler (del módulo de conexión) no tenía la opción de comprimir. Entonces, en lugar de escribir mi propio compilador de middleware. Sobreescribí el compilador Connect less en mi aplicación.

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

He publicado un package on GitHub called node-kickstart-example que utiliza un expreso preconfigurado práctico con la representación habilitada plantilla de jade y menos procesamiento de estilos. Utilice NPM para instalar kickstart, colocar las plantillas de jade en views/ y sus menos archivos en assets/styles/ y su buena para ir ... La solución de

Matt Sain para generar archivos CSS comprimido con menos y se expresan en incluido en kickstart.