javascript - español - Node.js+Express.js. ¿Cómo RENDER menos css?

ejs tutorial español

Question

No puedo mostrar menos css en mi área de trabajo Express.
Aquí está mi configuración actual (mis archivos css / less están en ''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''));
});

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 css main.less :

@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í están mis golosinas .

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

Buen trato. Ahora: instalé menos a través de npm y escuché en otra publicación que @imports debería hacer referencia a .less no a .less . En cualquier caso, he probado las combinaciones de cambiar. .less para .less en el jade y menos archivos sin éxito.

Si puedes ayudar o tienes la solución, te lo agradecería mucho.

Nota: la parte de jade funciona bien si ingreso cualquier '' .css ''.
Nota2: el menos compila si uso lessc a través de la línea de comandos.

Answer 1

Dos proyectos que podrían hacerte la vida más fácil.

1. Buildr: el script (Java | Coffee) y (CSS | Less) (Builder | Bundler | Packer | Minifier | Merger | Checker)

2. Less4Clients: extensión Express.js para procesar archivos LessCSS (.less) del lado del servidor :)

Answer 2

El problema es que el compilador solo compila el archivo si se cambia su mtime.

Digamos que usted tiene:

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

y

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

Ahora B.less , A no será recompilado!

Tengo una solicitud de extracción en espera desde meses, puede usar mi compilador de horquillas en lugar del maestro.

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

Answer 3

He publicado un paquete en GitHub llamado node-kickstart-example que utiliza un expreso preconfigurado práctico con procesamiento de plantillas de jade habilitado y menos procesamiento de hojas de estilo. Use npm para instalar kickstart , coloque sus plantillas de jade en views/ y sus menos archivos en assets/styles/ y estará listo para comenzar ...

La solución de Matt Sain para generar archivos css comprimidos con less y express está incluida en kickstart .

Answer 4

Si desea minimizar el css generado, encontré que al compilador incorporado (del módulo de conexión) le faltaba la opción de comprimir. Así que en lugar de escribir mi propio compilador de middleware para ello. Sobrescribí el compilador conectar menos 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

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

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

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

Utilizando @import "/public/stylo/goodies.css"; en su main.less hará que funcione.

Archivó un error para el problema de ruta relativa con less :
https://github.com/cloudhead/less.js/issues/issue/177