Why aren't my less files compiling in grunt?

Question

I installed npm, ran npm init, installed grunt grunt-contrib-less grunt-contrib-watch jit-grunt --save-dev

and my gruntfile.js looks like:

module.exports = function(grunt) {
  require('jit-grunt')(grunt);

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    less: {
      development: {
        options: {
          compress: true,
          yuicompress: true,
          optimization: 2
        },
        files: {
          "css/main.css": "less/main.less" // destination file : source file
        }
      }
    },
    watch: {
      styles: {
        files: ['_components/**/*.less'], // which files to watch
        tasks: ['less']
      }
    }
  });

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

when I run grunt in this directory everything seems to be going ok, except nothing is happening.

If I make a change grunt correctly spits out:

Running "watch" task
Waiting...
>> File "_components\less\_mixins.less" changed.
Running "less:development" (less) task
>> 1 stylesheet created.

Done.
Completed in 0.606s at Wed Jul 05 2017 12:45:41 GMT-0500 (Central Daylight Time) - Waiting...

however when I go to check my main.less file it is empty and when I go to check my main.css file it is also empty. Is my code just not being compiled or is it going somewhere I'm not aware of?

Answer 1

It's probably obvious, but make sure your paths to css and less files are correct and that your css/main.css file gets updated when you run less task.

Also, is there anything in your main.less file or do you import anything there? It might happen that there's just nothing to compile. I believe the way it's configured it's watching for changes in all your _components\\less_mixins.less files and then compiles less/main.less into css/main.css, so you need to make sure there's something in there to compile.