Express.js + Less: Come configurare correttamente

Question

Ho provato i moduli 'less' e 'less-middleware'. Ho provato tutti i diversi snipplet di codice che ho trovato in tutte le esercitazioni. Non c'è documentazione disponibile. Qualcuno può spiegare come confondere Express.js e Less, in modo che meno venga precompilato correttamente ?!

Utilizzare le seguenti domande come una linea guida:

1. Shall si utilizzare il 'meno' modulo o il modulo 'meno middleware'? Qual è il modo ufficiale/supportato? Cos'è superiore?
2. Come dovrebbe essere la tua struttura di directory in /public? (qualsiasi cartella specifica è necessaria? 'styles'/'less'/'css'? o dipende da te?)
3. Come configurare l'app express relativa alla struttura della directory (dalla domanda 2). (I file e le opzioni di compilazione o meno middleware statica, quali directory sono importanti qui)
4. Come riferimento mia precompilato foglio di stile dalla html? (Con .less o css? Che tipo di riferimento? Quali directory-path?)

sarebbe così bello se qualcuno potesse rispondere a questa :-)

Answer 1

Questa soluzione funziona solo per Express 2.x.

ho trovato una soluzione, questo aiuta spera che qualcuno:

---

1. inferiore o meno-middleware

sto usando di meno perché ho letto che è la porta ufficiale . Ma non sono sicuro quale sia la differenza dal momento che non c'è documentazione disponibile.

2. struttura di directory:

vostra struttura di directory non importa meno. Ma è altamente consigliato avere una cartella pubblica che serva tutti i contenuti statici come JavaScript,, Less, CSS o Image.

3.App config:

Hai bisogno di due cose specifiche per rendere meno funziona correttamente:

In primo luogo, il compilatore, che compila i meno file:

E in secondo luogo, spettacolo esprimere dove trovare il file statici!

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

Entrambi devono puntare alla tua cartella pubblica!

4. Il html

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

Point direttamente al file di root-less, che si trova da qualche parte nella cartella pubblica.

5. Il meno file

Grazie a this risposta So che cosa è andato storto tutto il tempo. C'è una specie di bug in less.js. Non troverà tutti i file che importi nel tuo file di root. Quindi devi aggiungere il percorso corretto ad ogni importazione !!!

Sostituire @import "reset.less"; con @import "/public/styles/reset.less"; per ogni import è necessario!

et voilà ... :-)

---

di Grazie a tutti coloro che hanno contribuito a questo problema. Guarda anche la risposta di Wes Johnson. Penso che abbia una soluzione molto bella che in qualche modo non ha funzionato per me ...

Answer 2

Non ho mai usato meno middleware, ma io Non sono sicuro di quanto sia rilevante per la maggior parte delle applicazioni. La maggior parte dovrebbe probabilmente compilare in anticipo, ad esempio: quando si avvia Nodo. Potrebbe essere semplice come questa:

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 struttura della directory è interamente la vostra preferenza. Vorrei fare uso di express.static nel servire il file CSS compilato.

Answer 3

Per this answer (which I also worked on). In primo luogo configurare il 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); 

Poi semplicemente includere il link al file less tranne cambiare l'estensione a css. In questo modo,

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

E, che compilerà components/bootstrap/less/bootstrap.less a CSS e servire al vostro cliente.

Vedere docs on less-middleware per ulteriori informazioni su come fare cose interessanti come ridurre automaticamente.