Express.js + Less: cómo configurar correctamente

Question

Probé los módulos 'less' y 'less-middleware'. Probé todos los snipplets de código diferentes que he encontrado en todos los tutoriales. No hay documentación disponible. ¿Puede alguien explicar cómo confinar Express.js y Less para que menos se precompile correctamente?

Use las siguientes preguntas como guía:

1. os utilizar el 'menos' módulo o el módulo de 'menos middleware'? ¿Cuál es la forma oficial/compatible? ¿Qué es superior?
2. ¿Cómo debería ser su estructura de directorio en /public? (cualquier 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 compilación o menos middleware, ¿qué directorios son importantes aquí)
4. Cómo referencia mi precompilado hoja de estilos desde el html? (Con o .less Css? Qué tipo de referencia? ¿Qué directorio de la ruta?)

sería tan bueno si alguien podría responder a esa :-)

Answer 1

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

He encontrado una solución, esto es de esperar ayuda a alguien:

---

1. menos o menos middleware

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

2. estructura de directorios:

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

3.Aplicación de configuración:

Se necesitan dos cosas específicas para hacer menos trabajo correctamente:

En primer lugar, el compilador, que compila los menos archivos:

Y en segundo lugar, la demostración de expresar dónde encontrar el archivos estáticos!

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

¡Ambos deberían apuntar a su carpeta pública!

4. El html

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

apuntan directamente a su archivo root-menos, que se encuentra en algún lugar de su carpeta pública.

5. El Menos Archivos

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

Reemplazar @import "reset.less"; con @import "/public/styles/reset.less"; para toda importación que tienen!

et voilà ... :-)

---

de agradecimiento a todos los que ayudaron con este tema. También eche un vistazo a la respuesta de Wes Johnson. Creo que tiene una solución muy buena que de alguna manera no funcionó para mí ...

Answer 2

nunca he utilizado menos middleware, pero No estoy seguro de cuán relevante es eso para la mayoría de las aplicaciones. La mayoría debería compilar por adelantado, es decir: cuando inicias Nodo. 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 su preferencia. Haría uso de express.static al servir el archivo CSS compilado.

Answer 3

Por this answer (which I also worked on). En primer lugar configurar su 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); 

A continuación, basta con incluir el enlace al archivo less excepto cambiar la extensión a css. De esta manera,

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

Y, que recopilará components/bootstrap/less/bootstrap.less a css y servir a su cliente.

Consulte el docs on less-middleware para obtener más información sobre cómo hacer cosas interesantes como minify automatically.