Wrong CSS Path - Live Reload issue with Grunt

You have to set the base so that Grunt knows where to run the application from. The files the tasks output should be set to reflect the structure Wordpress expects. Its all in the path configuration.

You can achieve a more flexible path structure if you configure it early on Grunt's configuration. Assuming that the Gruntfile.js is in the root of your site (besides the wp-content directory), you could do the following configuration:

grunt.initConfig({    // configurable paths    cfg: {        dist: './wp-content/themes/project'    },    // tasks configurations come here...});

Then on the watch task, you'd set:

livereload: {    files: ['<%= cfg.dist %>/assets/css/*.css'],    options: {        nospawn: true,        interrupt: false,        livereload: true    }}

The resulting Gruntfile.js would look like:

module.exports = function(grunt) {    grunt.initConfig({        // configurable paths        cfg: {            dist: './wp-content/themes/project'        },        less: {            development: {                options: {                    compress: false,                    yuicompress: false,                    optimization: 0                },                files: {                    '<%= cfg.dist %>/assets/css/main.css': '<%= cfg.dist %>/assets/css/main.less'                }            }         },        watch: {            styles: {                files: ['<%= cfg.dist %>/assets/css/*.less', '<%= cfg.dist %>/assets/less/*.less'],                tasks: ['less']            },            css: {                files: ['<%= cfg.dist %>/assets/css/*.css'],                options: {                    nospawn: true,                    interrupt: false,                    livereload: true                }            }        }    });    grunt.loadNpmTasks('grunt-contrib-less');    grunt.loadNpmTasks('grunt-contrib-watch');    grunt.registerTask('default', ['less','watch']);};

You'd still have to adjust the above to fit your needs, but the principle is there.

I don't have a setup I can test this on, but I think you need to set the base option:

// Project configuration.grunt.initConfig({  connect: {    server: {      options: {        base: 'www-root'      }    }  }});

See doc here: https://github.com/gruntjs/grunt-contrib-connect/blob/master/README.md#basic-use

Read down through multiple servers if relevant.