2012-02-07 5 views
22

Dal momento che Twitter Bootstrap 2 è fuori, ho voluto integrarlo nel mio progetto Node.js. Sfortunatamente, c'è qualcosa di sbagliato nel compilatore meno e non riesco a farlo funzionare. Metto tutti i file nella cartella pubblica e configuro un nuovo progetto con express -c less newproj. e ha aggiunto le linee per menoBootstrap Twitter LESS con Node.js & Express

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

nodo Tutti mi dice è:

Express server listening on port 3000 in development mode 
undefined 

Sul lato client ho un (Internal Server Error) 500 per il file bootstrap.css, che deve essere compilato da lessc.

lessc bootstrap.less 

Funziona bene.

Qualcuno sa come risolvere il problema?

+0

Quali altri middleware avete in esecuzione? statico? Sai cosa sta registrando undefined in console? –

+0

Nient'altro. È un progetto completamente nuovo e ho solo modificato queste due righe e il file layout.jade. Nessun indizio in cui il "indefinito" provenga da entrambi. – Patrick

risposta

19

Ai posteri, questo è cambiato molto negli ultimi espresso:

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); 
+0

In che versione si trova? –

+0

ok, ho installato less-middleware. il mio file less (styles.less) è in /public/stylesheets/styles.less --- come faccio a ottenere styles.css? –

+0

@barraponto use href = '/ stylesheets/styles.css' e il css viene generato automaticamente – tofutim

11

Ok, ecco quello che ho trovato per te. Prima di tutto occorrono sia il compilatore che il middleware statico. Il compilatore compila il tuo meno e ricompila sui cambiamenti, il middleware statica fa il servizio effettivo del css

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

In secondo luogo, per qualche ragione, quando il compilatore gestisce sta perdendo le informazioni sul percorso corrente, in modo che non riesce a trovare include. Quindi ho dovuto passare attraverso il bootstrap.css e aggiungere il percorso a ogni importazione.

@import "/public/stylesheets/reset.less"; 

Questo è chiaramente strano, ho intenzione di approfondire ulteriormente.

Modifica: Sebbene dispari, uno sguardo approfondito nel codice non mi mostra un modo semplice per aggirarlo. Un po 'più di ricerca ha trovato questa richiesta di pull sul repository di connessione https://github.com/senchalabs/connect/pull/174 che offre una soluzione per questo, ma gli sviluppatori non sembrano volerlo.

Esistono anche alcuni accorgimenti in questo thread, ma sembra che l'idea migliore sia il percorso assoluto che include.

+0

Vedere la soluzione di GoldenBoy per un aggiornamento su questo. Dovresti usare meno-middleware. – tofutim