La parfaite adéquation entre Node.js et LESS

LESS est un excellent moyen d'écrire du CSS, vous permettant d'utiliser des variables, des règles imbriquées, des mixins et de nombreuses autres fonctionnalités utiles, qui peuvent vous aider à mieux organiser votre code CSS.
J'ai étudié Node.js récemment et je souhaitais utiliser un middleware moins middleware afin de pouvoir facilement utiliser LESS dans mon application. Après configuration, LESS-Middleware peut automatiquement compiler votre code LESS en code CSS.

Si vous stockez les fichiers LESS et CSS dans le même répertoire, la configuration est simple, mais je souhaite utiliser des chemins différents pour mon répertoire source et mon répertoire cible, il y a un petit problème ici, alors ici, J'ai pensé documenter les problèmes que j'ai trouvés.
Si vous spécifiez un répertoire "src" et "dest" différent, vous devez également fournir l'option "prefix", qui doit correspondre au répertoire suivant votre répertoire cible. Voici un exemple pour vous aider à mieux comprendre :

var  lessMiddleware = require("less-middleware");
app.use(lessMiddleware({
    src: __dirname + "/less",
    dest: __dirname + "/public/css",
    prefix: "/css",
    force: true
}));
app.use(express.static(__dirname + "/public"));

Dans cet exemple, j'ai configuré le répertoire source comme répertoire "/less" sous le répertoire racine de mon application et j'ai laissé le CSS. être affiché dans le répertoire "/public/css. De plus, vous devez également spécifier l'attribut "prefix" pour qu'il corresponde au répertoire suivant "/public", c'est-à-dire le répertoire "/css".
Vous pouvez également spécifiez d'autres paramètres, le paramètre force est spécifié ci-dessus, permettant de recompiler le fichier LESS à chaque fois qu'il est demandé, combiné à la fonction de rafraîchissement automatique, afin que les modifications du code de style en cours de développement puissent avoir des effets immédiats
Enfin, le fichier CSS est cité sur la page. C'est comme d'habitude :

<link rel="stylesheet", type="text/css", href="css/styles.css">

Lors de la publication de cet article, less-middleware avaient été mis à jour vers la version 1.0.3. 0.1.x. Ce qui suit est Permettez-moi de vous présenter comment migrer de 0.1.x vers 1.0.x
Tout d'abord, il y a un changement important - le changement du paramètre du répertoire source, qui était auparavant placé dans le paramètre options, comme suit :

lessMiddleware({
  src: path.join(__dirname, '/public')
})

Le répertoire source étant un paramètre obligatoire, il sera utilisé comme premier paramètre du middleware après la mise à niveau, comme suit :

lessMiddleware(path.join(__dirname, '/public'))

Le deuxième changement est la séparation des paramètres middleware et des paramètres LESS De cette façon, la structure des paramètres est plus claire, comme suit :

lessMiddleware(source, [{options}], [{parserOptions}], [{compilerOptions}])

Le paramètre options est fourni au middleware, et les deux derniers objets paramètres n'affecteront pas le middleware et seront transmis à LESS pour analyse et compilation
Après cet ajustement, la méthode de définition des paramètres correspondante doit également être ajustée en conséquence. Voici quelques modifications correspondantes :

compresser : supprimé des options, doit être défini dans compilerOptions ;
dumpLineNumbers : supprimé des options, doit être défini dans parserOptions ;
optimisation : supprimé des options, doit être défini dans parserOptions ; paths : supprimé des options, doit être défini dans parserOptions ;
preprocessor : a été déplacé vers preprocessor.less pour la définition
relativeUrls : supprimé des options, doit être défini dans parserOptions ;
sourceMap : supprimé. des options, doit être défini dans compilerOptions ;
yuicompress : supprimé des options Supprimé, il doit être défini dans compilerOptions ;
Le troisième changement est qu'un nouveau paramètre a été ajouté et que les paramètres prefix et treeFunctions ont a été supprimé, vous permettant de le configurer de manière plus flexible, comme suit :
postprocess.css : dans Avant d'être enregistré, modifiez la sortie de la compilation CSS
preprocess.less : modifiez LESS avant qu'il ne soit analysé et compilé preprocess.path : modifier le chemin LESS avant d'être chargé par le système de fichiers ;
Avec ceci Pour plusieurs paramètres, la fonction que nous avons implémentée en utilisant le préfixe avant peut être utilisée pour obtenir le même effet de la manière suivante :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!