Best or simplest way to integrate less in yeoman?

cremersstijn picture cremersstijn · Apr 29, 2013 · Viewed 9.6k times · Source

I'm experimenting with yeoman.

I want to integrate less into my yeoman or grunt build. But I haven't found I simple way to do it.

I do have found to yeoman-less repository which refers to grunt-contrib-less. But that plugin is quite hard to plugin if you are new to yeoman and grunt. Isn't there a much easier way to plugin less into my yeoman webapp so the less commands are automatically added to the grunt build file?

Thanks for the tips and tricks!

Answer

passy picture passy · May 5, 2013

Assuming that you scaffold out a new app using yo webapp and answer both questions with No, your best choice for integrating LESS is grunt-recess which you need to install first:

npm install --save-dev grunt-recess

If you dislike the linting rules, you can customize them. Feel free to uninstall grunt-compass and remove it from the package.json.

You then need to replace the compass task in the Gruntfile with this:

    recess: {
        options: {
            compile: true
        },
        dist: {
            files: [{
                expand: true,
                cwd: '<%= yeoman.app %>/styles',
                src: '{,*/}*.less',
                dest: '.tmp/styles/',
                ext: '.css'
            }]
        }
    }

You then need to replace all remaining references to the compass task with recess, so that the resulting Gruntfile looks like this one.