grunt watch compiled less but not generating css

Question

Grunt watch compiled my LESS file, but is not generating a CSS file. I don't know what the issue is. Can anyone out there help?

Here is my grunt code:

module.exports = function(grunt) {

grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');

grunt.initConfig({ 
    pkg: grunt.file.readJSON('package.json'), 
    less: {
        options: {
            paths: 'less',
            yuicompress: true
        },
        files: {
            'styles.css': 'less/button.less'
        }
    },

    watch: {
        less: {
            files: 'less/*.less',
            tasks: 'less'
        }
    }
});
}

And here is my package.json code:

{
  "name": "project-name",
  "version": "1.0.0",
  "description": "Awesome project",
  "devDependencies": {
    "grunt-contrib-less": "^1.4.1",
    "grunt-contrib-watch": "^1.0.0"
  }
}

See my folder structure below:

Grunt Watch working fine:

Answer 1

Grunt expects your less task configuration to have one or more _targets. Each target, which can be arbitrarily named, would have a files object.

In your configuration, Grunt thinks that files is the target, hence why the console output shows Running less:files. When Grunt does not find a files object within the files target, it moves on.

In order to fix your configuration, you must add a target object that will wrap the files object. For example,

less: {
    options: {
        paths: 'less',
        yuicompress: true
    },
    dev: {
        files: {
            'styles.css': 'less/button.less'
        }
    }
},

For more on Grunt task configuration and targets, see the documentation.