Node.js + Express.js. Cómo hacer menos css?

StackOverflow https://stackoverflow.com/questions/4618257

Pregunta

Soy incapaz de hacer menos css en mi espacio de trabajo expreso.
Aquí está mi configuración actual (mi css / menos archivos se encuentran 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í está 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 la NGP y que había oído de otro post que @imports deben hacer referencia a la no .css la .less. En cualquier caso, he probado el combinaciones de cambiar .less para .css en el jade y menos archivos sin éxito.

Si usted puede ayudar o tiene la solución te agradecería muchísimo.

Nota: La porción de jade funciona bien si entro en cualquier ol' .css
. Nota 2:. Los menos compila si uso lessc través de la línea de comandos

¿Fue útil?

Solución

Gosh, eso es muy inconsistente en cómo los caminos del trabajo, sin embargo, me di cuenta de lo que puede conseguir que funcione.

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

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

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

Archivado de un fallo de funcionamiento por el problema de ruta en relación con less:
https://github.com/cloudhead/less.js/issues/issue/177

Otros consejos

Si desea minify la CSS como salida, encontré que el construido en el compilador (del módulo de conexión) faltaba la opción compresa. Así que en lugar de escribir mi propio compilador de middleware para ello. Me sobreescribí al menos compilador de conexión 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'] }));

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

Digamos que tiene: 

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

y 

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

Ahora modifico B.less, A no se vuelve a compilar!

Tengo una petición de espera tirón desde meses, se puede usar mi compilador tenedor en lugar de la maestra.

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

He publicado un paquete de href="http://github.com/semu/node-kickstart-example" en GitHub llamado nodo-kickstart- ejemplo, qué usos un expreso preconfigurado práctico con la representación habilitada plantilla de jade y menos procesamiento de estilos. Uso NPM para instalar kickstart , colocar las plantillas de jade en views/ y sus menos archivos en assets/styles/ y su buena ir ...

La solución de Matt Sain para generar archivos CSS comprimido con menos y se expresa en incluido en kickstart .

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top