node.js - nodejs - Express.js+Menos: Cómo configurar correctamente

node js request events

Question

Probé los módulos "menos" y "menos middleware". Probé todos los diferentes snipplets de código que he encontrado en todos los tutoriales. No hay documentación disponible. ¿Alguien puede explicar por favor cómo configuar Express.js y Less, para que menos sea precompilado correctamente?

Use las siguientes preguntas como guía:

1. ¿Debe utilizar el módulo ''menos'' o el módulo ''menos middleware''? ¿Cuál es la forma oficial / apoyada? ¿Qué es superior?
2. ¿Cómo debería ser su estructura de directorios en /public ? (¿Alguna carpeta específica que necesita? ''styles'' / ''less'' / ''css''? ¿O depende de usted?)
3. Cómo configurar su aplicación Express con respecto a su estructura de directorios (de la pregunta 2). (archivos estáticos y opciones de compilador o middleware inferior, qué directorios son importantes aquí)
4. ¿Cómo hacer referencia a mi hoja de estilo precompilada desde el html? (¿Con .less o .css? ¿Qué tipo de referencia? ¿Qué ruta de directorio?)

Sería tan bueno si alguien pudiera contestar eso :-)

Answer 1

Nunca he usado menos middleware, pero no estoy seguro de lo relevante que es para la mayoría de las aplicaciones. La mayoría probablemente solo debería compilar por adelantado, es decir: cuando inicias Node. Podría ser tan simple como esto:

var fs      = require(''fs''),
    less    = require(''less'');

fs.readFile(''styles.less'', function(err,styles) {
    if(err) return console.error(''Could not open file: %s'',err);
    less.render(styles.toString(), function(er,css) {
        if(er) return console.error(er);
        fs.writeFile(''styles.css'', css, function(e) {
            if(e) return console.error(e);
            console.log(''Compiled CSS'');
        });
    });
});

La estructura del directorio es totalmente su preferencia. Haría uso de express.static para servir el archivo CSS compilado.

Answer 2

Por esta respuesta (en la que también trabajé) . Primero configura tu app.js ,

app.use(require(''less-middleware'')({ src: __dirname + ''/public'' }));
app.use(express.static(path.join(__dirname, ''public'')));

// This is just boilerplate you should already have
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);

Luego simplemente incluya el enlace al archivo less , excepto que cambie la extensión a css . Me gusta esto,

<link rel="stylesheet" href="components/bootstrap/less/bootstrap.css" />

Y, eso compilará los components/bootstrap/less/bootstrap.less a css y se los entregará a su cliente.

Consulte los documentos en less-middleware para obtener más información sobre cómo hacer cosas geniales, como minimizar automáticamente.

Answer 3

Esta solución solo funciona para Express 2.x.

He encontrado una solución, esto espero que ayude a alguien:

1. menos o menos middleware

Estoy usando menos porque lo leí es el puerto oficial. Pero no estoy seguro de cuál es la diferencia ya que no hay documentación disponible.

2. Estructura del directorio:

La estructura de su directorio no importa por menos. Pero es muy recomendable tener una carpeta pública que sirva todo el contenido estático como JavaScript,, Menos, CSS o archivos de imagen.

3. Configuración de la aplicación:

Necesitas dos cosas específicas para hacer que menos funcione correctamente:

Primero, el compilador, que compila menos archivos:

    app.use(express.compiler({ src : __dirname + ''/public'', enable: [''less'']}));

Y segundo, mostrar expresamente dónde encontrar los archivos estáticos!

    app.use(express.static(__dirname + ''/public''));

¡Ambos deben apuntar a su carpeta pública!

4. El html

    <link rel="stylesheet" href="/styles/bootstrap.css">

Apunte directamente a su archivo sin raíz, que se encuentra en algún lugar de su carpeta pública.

5. Los menos archivos

Gracias a this respuesta, sé lo que salió mal todo el tiempo. Hay una especie de error en less.js. No encontrará todos los archivos menos que importe en su archivo raíz. Así que tienes que agregar la ruta correcta a cada importación!

Reemplace @import "reset.less"; con @import "/public/styles/reset.less"; ¡Por cada importación que tengas!

et voilà ... :-)

Gracias a todos los que ayudaron con este problema. También echa un vistazo a la respuesta de Wes Johnson. Creo que tiene una muy buena solución que de alguna manera no me funcionó ...