2012-02-07 6 views
22

Depuis Twitter Bootstrap 2 est sorti, je voulais intégrer cela dans mon projet Node.js. Malheureusement, il y a quelque chose qui cloche avec le compilateur moins et je ne peux pas le faire fonctionner. J'ai mis tous les fichiers dans le dossier public et mis en place un nouveau projet avec express -c less newproj. et a ajouté les lignes pour moinsTwitter Bootstrap LESS avec Node.js & Express

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

Tout nœud me dit est:

Express server listening on port 3000 in development mode 
undefined 

Du côté client, je reçois 500 (erreur interne du serveur) pour le fichier bootstrap.css, qui devrait être compilé par lessc.

lessc bootstrap.less 

Fonctionne correctement.

Quelqu'un sait comment résoudre le problème?

+0

Quels sont les autres middleware Avez-vous en cours d'exécution? statique? Savez-vous ce qui se connecte à l'indéfini à la console? –

+0

Rien d'autre. C'est un projet complètement nouveau et je n'ai changé que ces deux lignes et le fichier layout.jade. Aucune idée où le "non défini" vient de l'un ou l'autre. – Patrick

Répondre

19

Pour la postérité, cela a beaucoup changé au cours des dernières Express:

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

Dans quelle version est-ce? –

+0

ok, j'ai installé moins de middleware. mon fichier less (styles.less) est dans /public/stylesheets/styles.less --- comment puis-je obtenir styles.css? –

+0

@barraponto utilise href = '/ stylesheets/styles.css' et le css est généré automatiquement – tofutim

11

Ok, voici ce que j'ai trouvé pour vous. D'abord, vous avez besoin du compilateur et du middleware statique. Le compilateur compile votre moins et recompile sur les changements, le middleware statique fait la portion réelle du css

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

En second lieu, pour une raison quelconque lorsque le compilateur exécute perd l'information de chemin actuel, il ne peut pas trouver l'inclut. J'ai donc dû passer par le bootstrap.css et ajouter le chemin à chaque importation.

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

Ceci est clairement étrange, je vais creuser plus loin. Edit: Bien que bizarre, un coup d'oeil profond dans le code ne me montre aucun moyen simple autour de lui. Un peu plus de recherche trouvé cette demande de traction sur le repo de connexion https://github.com/senchalabs/connect/pull/174 qui offre une solution pour cela, mais les développeurs ne semblent pas le vouloir.

Il existe également des solutions de contournement dans ce thread, mais il semble que la meilleure idée soit de faire un chemin absolu.

+0

Voir la solution @ GoldenBoy pour une mise à jour à ce sujet. Vous devriez utiliser moins de middleware. – tofutim