Why did my inline LESS sourceMap break?

Question

Been happily working with LESS for weeks now, using grunt-contrib-less (version 0.11.4) dependency in my package.json and initializing it in the gruntfile. The map is generated inline at the end the final minified styles.css.

I was pulled away from this project for a few weeks, and when I came back to it, suddenly none of my browsers are able to display LESS line numbers, and every style maps to line 1 (or more accurately, line 5 as the generated file has several lines at the beginning).

The CSS compiles fine, and the sourcemap is clearly there at the end of the file, but I can no longer inspect and debug LESS files in any browser's dev tools.

I had some outside help setting up the gruntfile initially, and unfortunately that help is no longer available. I'm new to Grunt and JSON and officially in over my head. How the heck did I break this? I didn't actually mess with the included code, but I'm unsure what else could be causing sourceMap issues.

Here is my grunt file code:

module.exports = function(grunt) {

  grunt.initConfig({
    less: {
      development: {
        options: {
          paths: ["less"],
          sourceMap: true,
          compress: true
        },
        files: {
          "dist/css/styles.css": "less/styles.less"
        }
      }
    },
    watch: {
      styles: {
        files: ["less/*.less"],
        tasks: ["less"]
      },
      javascripts: {
        files: ["js/**.js"],
        tasks: ['build']
      }
    },
    shell: {
      addstory: {
          command: function(arg) {
            return 'node node_scripts/addstory.js ' + arg;
          }
      }
    },
    concat: {
      dist: {
        src: ["js/lib/ie10-viewport-bug-workaround.js","js/lib/lazyload.min.js", "js/lib/jquery.dotdotdot.min.js", "js/lib/pointerevents.js", "js/lib/megafolio/js/jquery.themepunch.plugins.min.js", "js/lib/megafolio/js/jquery.themepunch.megafoliopro.js", "js/app.js"],
        dest: 'dist/js/main.js'
      }
    },
    uglify: {
      options: {
        mangle: false
      },
      dist: {
        files: {
          'dist/js/main.min.js': ['dist/js/main.js']
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-shell');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-less');

  grunt.registerTask('addstory', function(arg) {
    if (arg === undefined) {
      throw new Error('NO HTML FILE SPECIFIED!')
    } else {
      grunt.task.run('shell:addstory:'+arg);
    }
  });

  grunt.registerTask('build', ['concat', 'uglify']);

};

And package.json:

{
  "name": "ilium-web-bootstrap-team-ec",
  "version": "0.0.0",
  "description": "the ilium website redesign",
  "main": "dist/index.html",
  "dependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-clean": "^0.5.0",
    "grunt-contrib-compress": "^0.11.0",
    "grunt-contrib-concat": "^0.4.0",
    "grunt-contrib-connect": "^0.8.0",
    "grunt-contrib-copy": "^0.5.0",
    "grunt-contrib-csslint": "^0.2.0",
    "grunt-contrib-cssmin": "^0.10.0",
    "grunt-contrib-jshint": "^0.10.0",
    "grunt-contrib-less": "^0.11.4",
    "grunt-contrib-uglify": "^0.5.1",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-shell": "^1.1.1",
    "jquery": "^2.1.1",
    "jsdom": "^0.11.1",
    "prompt": "^0.2.14"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": " "
  },
  "author": "matt kristiansen and ryan juve",
  "license": "ISC"
}

I'm hoping I made some kind of common mistake that results in an inability to see LESS in dev tools. Any guidance?

Answer 1

Okay, well the lesson here is to actually take notice when your LESS compile is aborted due to syntax errors. This had somehow escaped my attention.

Turns out missing closing curly bracket will break sourceMaps, which makes sense.

Thanks all.