Live edit, live reload with Chrome Workspaces, grunt and Less

Question

I have setup a project with Bootstrap's less files and gruntjs in order to be able to have live edit in the Chrome Workspaces.

Hereunder is my Gruntfile.js. It auto-compiles less files into the desired style.css and creates a source map file when I save my changes. I'm also able to edit and save less files from Chrome Workspaces after adding the project directory to the Workspaces.

module.exports = function(grunt) {
    'use strict';

    require('matchdep').filterDev('grunt-!(cli)').forEach(grunt.loadNpmTasks);

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        less: {
            dev: {
                options: {
                    sourceMap: true,
                    sourceMapFilename: 'public/css/style.map',
                    sourceMapBasepath: 'public/css'
                },
                files: {
                    'public/css/style.css': 'less/style.less'
                }
            }
        },
        watch: {
            all: {
                files: ['less/**/*.less'],
                tasks: ['less'],
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default', ['less', 'watch']);
};

The problem I'm having is that I'm unable to see the live reload of my modifications on the less files via Sublime Text 2 or Chrome Workspaces directly in the browser without refreshing the page.

What am I missing? I have to map files? What file to what file exactly? Will I need to map multiple the same way or only one file.

I've also added an image where you can see the files tree.

FYI, also please note that the style.less imports the bootstrap less files and my custom less files.

// Core variables and mixins

@import "bootstrap/bootstrap";
@import "showtime/lib";
@import "showtime/intro";
@import "showtime/nav";
@import "showtime/portfolio";
@import "showtime/contact";
@import "showtime/footer";
@import "showtime/album";

Update If edit from the Elements tab, my style.less file gets overwritten with the content that is also in style.css and then it works. What am I doing wrong ?

Many thanks for your time and help.

Answer 1

OK the only I was able to make everything work is by putting the less files in my css folder.