Refresh less css which has other imported less files without page load

Question

I want to use watch mode in my development environment. It works fine with single less file. But I have so many less files which are imported to app.less. My app.less looks

@import "variables";
@import "mixins";

It seems I can not use watch mode in this setting. Is there any other ways?

Answer 1

I'm totally agree with this comment Refresh less css which has other imported less files without page load . Thanks, thevasya.

But there's no need to start several terminals.

watch: {
    less: {
        files: ['less/*.less'],
        tasks: 'less'
    },
    reload: {
        files: ['*.html',
                'css/app.css',
                'js/*.js'],
        tasks: 'reload'
    }
}

after that you can start watching by

$ grunt watch

and that's it. If you change any less file, it will start only less task.

P.S.: This answer was updated for proper work with grunt 0.4.

Answer 2

Upd. This syntax is for old grunt versions so it should not be used.

You need to use LiveReload app for this. Or maybe another software that can reload page with LiveReload browser extension (maybe Sublime Text editor with a plugin).

Possible setup is Node.js with Grunt which has grunt-contrib-less and grunt-reload modules installed.

Your grunt.js config should look like this:

module.exports = function(grunt) {
grunt.initConfig({
    //  Start LiveReload server
    reload: {
        port: 35729,
        liveReload: {}
    },
    //  Simple css compilation
    less: {
        src: 'less/app.less',
        dest: 'css/app.css'
    },
    //  Reload files on change
    watch: {
        less: {
            files: ['less/*.less'],
            tasks: 'less'
        },
        reload: {
            files: ['*.html',
                    'css/app.css',
                    'js/*.js'],
            tasks: 'reload'
        }
    }
});

//  Third party modules
grunt.loadNpmTasks('grunt-reload');
grunt.loadNpmTasks('grunt-contrib-less');

//  Register default task
grunt.registerTask('default', 'less');
};

Then you need to run

$ grunt watch:less

and

$ grunt watch:reload

in two separate terminal windows.