Angular et less

Si vous utilisez le yeoman angular, il ne vous sera proposé que Compass/Sass. Nulle trace de Less. Et c'est bien dommage car less est quand même bien plus léger que Sass. Bon, et bien j'ai retroussé mes manches et j'ai modifié la config de Grunt pour inclure le support de less. Voici ce qu'il vous faudra faire pour y arriver :

NPM

Commençons par installer grunt-recess d'un coup de :

npm install grunt-recess --save-dev

Gruntfile

Il ne vous reste plus qu'à modifier votre fichier Gruntfile de la façon suivante.

Dans l'objet passé à grunt.initConfig, ajoutez cette entrée :

recess: {
  dist: {
    src: [
      '<%= yeoman.app %>/styles/{,*/}*.less'
    ],
    dest: '.tmp/styles/main.css',
    options: {
      compile: true,
      compress: false
    }
  }
},

Dans l'entrée relative à watch, supprimez styles et ajoutez cette entrée là :

recess: {
    files: ['<%= yeoman.app %>/styles/{,*/}*.less'],
    tasks: ['recess', 'autoprefixer'],
    options: {
      livereload: true
    }
},

Pour finir, remplacez copy:styles par recess dans le bloc dédié à concurrent :

concurrent: {
  server: [
    'recess'
  ],
  test: [
    'recess'
  ],
  dist: [
    'recess',
    'imagemin',
    'svgmin'
  ]
},

Il ne vous reste plus qu'à créer des fichiers .less dans votre dossier app/styles et ils devraient être servis après avoir lancé grunt serve et compilé dans le dossier dist après un grunt tout court.

Hadrien

Hi, I'm a french Javascript Lead Developer, Web Architect from Toulouse, France. I've worked for 12 years for many projects with YUI, AngularJS, Aurelia.io and now React and React native.

Toulouse, France https://hadrien.eu