LESS/Grunt is not writing the sourcemap reference to the end of the compiled CSS

Question

I am using grunt-contrib-less to compile my .less files in to a single CSS stylesheet. Everything is working, except the source map, which I cannot get to work under any circumstances!

Here is my Gruntfile:

'use strict';

module.exports = function(grunt) {

// Force use of Unix newlines
grunt.util.linefeed = '\n';

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    project: {
        // Add entries to this array to create variables for use by Grunt
        app:        ['app'],
        server:     'http://mysite.app',

        // Components
        bower:      ['<%= project.app %>/bower_components'],
        bootstrap:  ['<%= project.bower %>/bootstrap'],

        // Custom Assets
        assets:     ['<%= project.app %>/assets'],
        css:        ['<%= project.assets %>/css'],
        less:       ['<%= project.assets %>/less'],
        js:         ['<%= project.assets %>/js']
    },
    less: {
        production: {
            options: {
                ieCompat:           true,
                sourceMap:          true,
                sourceMapFilename:  '<%= project.css %>/style.css.map',
                sourceMapURL:       '<%= project.server %>/assets/css/style.css.map',
                sourceMapBasepath:  'app',
                sourceMapRootpath:  '<%= project.server %>'
            },
            files: {
                '<%= project.css %>/style.css': '<%= project.less %>/style.less'
            }
        }
    },
    autoprefixer: {
        dist: {
            files: {
                '<%= project.assets %>/css/style.css': '<%= project.assets %>/css/style.css'
            }
        }
    },
    concat: {
        options: {
            separator: ';\n',
            sourceMap: true
        },
        plugins_head: {
            // Add further Javascript plugins to this array and they will be
            // concatenated in to the plugins-built-head.js file
            src: [
                '<%= project.bower %>/modernizr/modernizr.js'
            ],
            dest: '<%= project.js %>/built/plugins-built-head.js'
        },
        plugins: {
            // Add further Javascript plugins to this array and they will be
            // concatenated in to the plugins-built.js file
            src: [
                '<%= project.bootstrap %>/js/dropdown.js'
            ],
            dest: '<%= project.js %>/built/plugins-built.js'
        },
        custom: {
            // Add further custom-written javascript files to this array and
            // they will be concatenated in to the scripts-built.js file
            src: [
                '<%= project.js %>/scripts.js'
            ],
            dest: '<%= project.js %>/built/scripts-built.js'
        }
    },
    watch: {
        css: {
            files: [
                '<%= project.bootstrap %>/less/*.less',
                '<%= project.less %>/*.less'
            ],
            tasks: [
                'less',
                'autoprefixer'
            ],
            options: {
                livereload: true
            }
        },
        js: {
            files: [
                '<%= project.js %>/scripts.js'
            ],
            tasks: ['concat']
        },
        html: {
            files: [
                '<%= project.app %>/*.html'
            ],
            options: {
                livereload: true
            }
        }
    }
});

grunt.loadNpmTasks('grunt-run-grunt');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-autoprefixer');

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

};

What's happening is that Grunt is writing a proper and correct style.css.map file, but it's not writing the following line to the end of the compiled style.css file:

/*# sourceMappingURL=http://mysite.app/assets/css/style.css.map */

That's the one line that's missing. Everything else is getting compiled and written correctly. If I manually add that line to the end of the compiled CSS, Chrome picks up on the source map properly, but it's not being written in.

Additionally, trying options like sourceMapFileInline seems to make no difference - the file is never written inline.

Any ideas?

Answer 1

Hopefully you have found a solution by now. This is for other people with the same issue:

• Make sure the soourcemap will be placed in the same folder as css.
• Set sourceMapUrl to only the name of the map file.
• This will add the following line to your .css file: /*# sourceMappingURL=default.css.map */

Here are the sourcemap settings in my grunt file:

sourceMap: true,
sourceMapFilename: "src/assets/css/default.css.map",
sourceMapURL: "default.css.map"