Can I change .less to a.min.css with a source map and still be able to view the .less files in Dev Tools?

Question

I am using this gruntfile to change my .less file to .css files.

module.exports = function (grunt) {
    grunt.initConfig({

        less: {
            development: {
                files: [{
                    expand: true,
                    cwd: 'assets/less',
                    src: ['*.less'],
                    dest: 'wwwroot/content/css/',
                    ext: '.css'
                }]
            },
            production: {
                files: {
                    "wwwroot/content/css/script.css": ["assets/less/*.less"]
                },
                options: {
                    cleancss: true
                }
            }
        }
    });
    grunt.loadNpmTasks("grunt-contrib-less");
};

For my development build if I have ten .less files then this will create ten .css files and then I will be able to view these in the Chrome Development Tools and easily debug.

The reason I am doing this is so that I will be able to debug and look at those ten .css files in the Chrome development tools.

Is my reasoning correct? I heard about source maps but how could I use these in my development build and if I used these then would I still be able to see the source .css file names or even better the ten .less files?

Answer 1

TL;DR yes to all of your questions ;)

To use source maps with your Gruntfile, simply add the option like this

less: {
    development: {
        options: {
            sourceMap: true
        },
        files: [{
            expand: true,
            cwd: 'assets/less',
            src: ['*.less'],
            dest: 'wwwroot/content/css/',
            ext: '.css'
        }]
    },

See grunt-contrib-less page for more info on the option available. Maybe, depending on your working environment, you should add the sourceMapRootpath option to specify where are your files. In the end, your .css file should have a long commented line at the end. That's the source map.

There are two bit-old-but-great introduction to source maps: Debug LESS With Chrome Developer Tools and Introduction to JavaScript Source Maps