Utilisez LESS avec le générateur yo angular

Utiliser LESS avec Yeoman et AngularJS

Dernièrement, nous avons vu comment utiliser LESS directement dans Brackets pour en profiter dans un thème WordPress.

Voyons cette fois comment l’intégrer directement dans une application Web en AngularJS générée avec Yeoman.

Installation de la tâche LESS pour grunt

Après avoir généré une application Web AngularJS avec Yeoman, il est nécessaire d’installer grunt-contrib-less qui se chargera de la conversion de CSS vers LESS :

npm install grunt-contrib-less --save-dev

Configuration de grunt-contrib-less

Maintenant que grunt-contrib-less est installé, il reste à le configurer. Tout se passe dans le fichier des tâches de Grunt, Gruntfile.js.

Création de la tâche

La première chose à faire est de déclarer la nouvelle tâche à la suite des autres. Pour plus de clarté, appelons-la less, et ajoutons-là juste après la tâche karma :

Cette tâche va interpréter tous les fichiers LESS présents à la racine du dossier less (pas dans les sous-dossiers) et écrire le résultat dans styles/style.css.

Je n’utilise pas l’option de minification du compilateur LESS, comme une autre tâche est déjà en charge de cette fonction, et minifie tous les fichiers CSS, qu’ils viennent de LESS ou non.

Surveillance des fichiers LESS avec le live reload

Une fois la tâche créée, il faut indiquer à Grunt quand l’utiliser.

Pour que le CSS soit généré au moment de la modification des fichiers LESS quand grunt serve est démarré, il suffit de l’ajouter dans la configuration de watch :

Ajout de LESS dans les tâches de Grunt

Troisième et dernière modification de Gruntfile.js : il reste à demander la compilation des fichiers LESS en CSS au moment du démarrage du serveur de développement (grunt serve), des tests (grunt test) et de la construction du package (grunt build).

Pour cela, dans chacune de ces tâches, il suffit d’ajouter la tâche less avant la tâche concurrent qui s’occupe, entre autres, de la minification :

Organisation du dossier du projet

Maintenant que Grunt est prêt à compiler nos fichiers LESS, nous pouvons les mettre en place.

Après avoir créer un dossier less dans le dossier app, vous pouvez créer autant de fichiers LESS qui seront compilés dans app/styles/style.css.

J’utilise la même structure que celle que j’avais décrite dans l’article qui concerne LESS et WordPress, pour résumer :

  • un fichier app/less/style.less qui référence les différentes sous parties qui vont composer le CSS
  • un dossier app/less/style/ qui contient les différentes sous-parties, par exemple : variables.less, mixins.less, header.less, connection-bar.less, …

Inclusion dans le projet

Enfin, le fichier style.css généré doit être inclus dans le fichier index.html :

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

A partir de ce moment, avec le live reload activé, chaque modification d’un fichier LESS provoquera la génération du fichier CSS et le rechargement dans le navigateur.

Le mot de la fin

Voilà, vous êtes maintenant prêts à produire du CSS à partir de LESS pour vos applications Web écrites en AngularJS.

Cet article vous a été utile ? Partage it !

5 réflexions au sujet de « Utilisez LESS avec le générateur yo angular »

  1. Bonjour
    Je trouve votre article très intéressante comme la plus part (simple et bien expliqué)

    Une question si je veux que mon fichier style.css généré à partir de mes fichiers .less soit pris en compte quand je fait un grunt serve:dist pour avoir une version en production comment est ce que je change mon grunt file?

    merci

    1. Bonjour arno,
      Normalement, le fait d’ajouter less dans la tâche build doit faire l’affaire.
      David

      1. merci David ,

        J’ai ajouter less dans la tâche build
        grunt.registerTask(‘build’, [
        ‘clean:dist’,
        ‘less’,
        ‘wiredep’,
        ‘useminPrepare’,
        ‘concurrent:dist’,
        ‘autoprefixer’,
        ‘concat’,
        ‘ngAnnotate’,
        ‘copy:dist’,
        ‘cdnify’,
        ‘cssmin’,
        ‘uglify’,
        ‘filerev’,
        ‘usemin’,
        ‘htmlmin’
        ]);

        mais dans le dossier dist /styles je ne trouve que main.162.css et vendor.d41 .css

        1. Si tu ajoutes la référence à style.css entre <!– build:css({.tmp,app}) styles/main.css –> and <!– endbuild –> son contenu devrait être présent dans le fichier main.*.css dans dist.
          David

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Si vous le souhaitez, renseignez le champ 'Nom' de cette façon : 'VotreNom@VotreMotClef' pour obtenir une ancre optimisée pour les moteurs de recherche.