How can I have my source Less files be in a non-public folder and have CSS (their sourcemaps) be public?

Question

I'm using Grunt (grunt-contrib-less) to process my Less files into CSS. This is working, but the sourcemaps are not.

My Less files are in /assets/less, and Grunt compiles them into /public/css.

/public/ is my folder that is publicly-viewable on the internet. I imagine there is a way to get sourcemaps to work even when my source Less files are not in the publicly-accessible folder. But I haven't found any examples.

My grunt-contrib-less config is:

options: {
    compress: true,
    yuicompress: true,
    optimization: 2,
    sourceMap: true,
    sourceMapFilename: "public/css/main.css.map", //Write the source map to a separate file with the given filename.
    sourceMapBasepath: "../assets/less", //Sets the base path for the Less file paths in the source map.
    sourceMapRootpath: "/",//Adds this path onto the Less file paths in the source map.
},
files: [
    {
        expand: true, // Enable dynamic expansion.
        cwd: 'assets/less/', // Src matches are relative to this path.
        src: ['*.less'], // Actual pattern(s) to match.
        dest: 'public/css/', // Destination path prefix.
        ext: '.css', // Dest filepaths will have this extension.
        extDot: 'first'   // Extensions in filenames begin after the first dot
    },
]

score 0 · Answer 1 · edited May 23 '17 at 12:27

I wonder what you mean when you say "not working". Notice that the source maps do not contain a copy of your original files. Source maps hold information about your original files, this information contains the filename (uri) and line number, something like that shown below:

Line: 1, column: 436 in generated code maps to: 
{"source":"src/jquery.js","line":1966,"column":26,"name":"jQuery"}

Debug tools can use this information to show you the corresponding line of you in your original source files, which is impossible when the tool can not read this file.

So i expect that your source maps are correct, but worthless for your debug tool.

You should add the following options to your config:

   options: {
        sourceMap:true,
        outputSourceFiles: true
    }

See also: Does grunt-contrib-less support --source-map-map-inline?

How can I have my source Less files be in a non-public folder and have CSS (their sourcemaps) be public?

1 Answers1