Best or simplest way to integrate less in yeoman?

Question

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!

Are you using a particular generator you want to integrate Less with? Would be easier to give an example then. — passy, Apr 29 '13 at 19:15
Currently I'm using "yo webapp", but I there is a better generator, please let me know! Thanks! — cremersstijn, Apr 30 '13 at 09:18
I tried the solution below, but couldn't get livereload working properly. However, I found a generator specifically for Bootstrap and Less: https://npmjs.org/package/generator-bootstrap-less — Ben Jacobs, Jun 18 '13 at 19:48

passy · Answer 1 · 2013-07-08T16:56:44.217

19

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.

edited Jul 08 '13 at 16:56

answered May 05 '13 at 08:42

passy

7,170
5
36
38

Thanks for the tip. When I make these changes, though, I'm unable to get livereload working. Did you have similar issues? (I'm running Yeoman Webapp generator 0.2.3) – Ben Jacobs Jun 18 '13 at 19:43
@Benmj Try the latest version, there were some issues with livereloading in the earlier versions. – passy Jul 03 '13 at 08:20
2

I was able to get it working. I think there's a typo in @passy's Gruntfile: there should be `recess:dist` instead of `recess:server` in the watch configuration. Here's my Gruntfile: https://paste.welcloud.de/show/9wZikzH1osEOkzjjuJtH/ – DreamSonic Jul 08 '13 at 15:16
Thank you, @DreamSonic. I updated the answer to link to your Gruntfile. – passy Jul 08 '13 at 16:57
I have added the recess tasks to my grunt file, but when i run grunt server, i get the following error: No "recess" targets found. This is my grunt file: https://gist.github.com/cremersstijn/7cc6eadb482b6e24c8ea – cremersstijn Aug 07 '13 at 19:22

score 1 · Answer 2 · answered May 18 '14 at 02:56

1

This is an old question, but I keep finding it. So, here is an up-to-date answer:

Use the "LessApp" generator for Yeoman, found here: https://github.com/robinpokorny/generator-lessapp

answered May 18 '14 at 02:56

okTalk

1,112
1
10
11

score 0 · Answer 3 · answered Feb 15 '14 at 18:06

If you get the following error Expected recess to have an identation at 9 instead at 10.

Please add recces to your grunt.registerTask, I've placed mine after the autoprefixer

grunt.registerTask('serve', function (target) {
    if (target === 'dist') {
        return grunt.task.run(['build', 'connect:dist:keepalive']);
    }

    grunt.task.run([
        'clean:server',
        'concurrent:server',
        'autoprefixer',
        'recess',
        'connect:livereload',
        'watch'
    ]);
});

The error you mention looks like a jshint/jslint error. Order of the task shouldn't matter. — Nilesh, Mar 19 '14 at 18:10

Best or simplest way to integrate less in yeoman?

3 Answers3