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?

The map file is used so when you are using inspector you can see what LESS file was used. — Aibrean
– Aibrean, Commented Dec 18, 2014 at 14:36

Giulio Bonanome · Accepted Answer · 2014-12-20 08:49:37Z

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

answered Dec 20, 2014 at 8:49

Giulio Bonanome

3663 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related