Question Express.js + Less: Comment configurer correctement


J'ai essayé les modules «less» et «less-middleware». J'ai essayé tous les fragments de code que j'ai trouvés dans tous les tutoriels. Il n'y a pas de documentation disponible. Quelqu'un peut-il s'il vous plaît expliquer comment configuer Express.js et moins, de sorte que moins se soit correctement précompilé?

Utilisez les questions suivantes comme guide:

  1. Voulez-vous utiliser soit le «moins» module ou le module «moins middleware»? Quelle est la manière officielle / soutenue? Qu'est-ce qui est supérieur?
  2. Comment devrait votre structure de répertoire dans /public ressembler? (des dossiers spécifiques dont vous avez besoin? "styles" / "moins" / "css"? ou est-ce à vous de choisir?)
  3. Comment configurer votre application express en ce qui concerne votre structure de répertoire (à partir de la question 2). (fichiers statiques et options du compilateur ou moins-middleware, quels répertoires sont importants ici)
  4. Comment référence mon précompilé feuille de style du html? (avec .less ou .css? quel type de référence? quel chemin de répertoire?)

Serait si gentil si quelqu'un pouvait répondre à cela :-)


16
2018-06-08 09:33


origine


Réponses:


Cette solution ne fonctionne que pour express 2.x.

J'ai trouvé une solution, cela devrait aider quelqu'un:


1. moins ou moins-middleware

J'utilise moins parce que j'ai lu que c'est le port officiel. Mais vous ne savez pas quelle est la différence car il n'y a pas de documentation disponible.

2. structure de répertoire:

Votre structure de répertoire n'a pas d'importance pour moins. Mais il est fortement recommandé d’avoir un dossier public qui sert tout le contenu statique comme les fichiers JavaScript, Less, CSS ou Image.

3. App config:

Vous avez besoin de deux choses spécifiques pour que votre travail fonctionne moins bien:

Tout d'abord, le compilateur, qui compile le moins de fichiers:

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

Et deuxièmement, montrez express où trouver les fichiers statiques!

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

Les deux devraient pointer vers votre dossier public!

4. Le html

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

Pointez directement sur votre fichier sans racine, qui se trouve quelque part dans votre dossier public.

5. Les fichiers moins

Grâce à ce réponds je sais ce qui a mal tourné tout le temps. Il y a une sorte de bogue dans less.js. Il ne trouvera pas moins de fichiers que vous importez dans votre fichier racine. Alors vous devez ajouter le chemin correct à chaque importation !!!

Remplacer @import "reset.less";  avec @import "/public/styles/reset.less";  pour chaque importation que vous avez!

et voilà... :-) 


Merci à tous ceux qui ont contribué à ce problème. Jetez également un coup d'œil à la réponse de Wes Johnson. Je pense qu'il a une très bonne solution qui, en quelque sorte, n'a pas fonctionné pour moi ...


12
2018-06-12 08:55



Par cette réponse (sur laquelle j'ai aussi travaillé). Configurez d'abord votre 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);

Ensuite, incluez simplement le lien vers le less fichier sauf modifier l'extension à css. Comme ça,

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

Et cela compilera components/bootstrap/less/bootstrap.less css et le servir à votre client.

Voir le docs on less-middleware pour plus d'informations sur la façon de faire des choses cool comme minify automatiquement.


4
2018-04-19 09:10



Je n'ai jamais utilisé moins de middleware, mais je ne suis pas sûr de son importance pour la plupart des applications. La plupart devraient probablement juste compiler en amont, à savoir: lorsque vous démarrez Node. Pourrait être aussi simple que cela:

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 structure de répertoires est entièrement votre préférence. Je ferais usage de express.static en servant le fichier CSS compilé.


2
2018-06-08 18:49