Less SourceMap absolute file paths using Grunt

Question

I have a file structure that looks like this (simplified for brevity):

/less/
     /styles.less
/public/
       /css/
           /styles.css
           /styles.css.map
/gruntfile.js

Gruntfile.js:

less: {
    options: {
        sourceMap: true,
        sourceMapFilename: 'public/css/styles.css.map',
        sourceMapURL: 'less/styles.less'
    }
    files: {
        'public/css/styles.css': 'less/styles.less'
    }
}

In the html file: <link rel="stylesheet" href="/css/styles.css">

Now the issue is that in dev tools, styles.less points to /css/less/styles.less. That's clearly not right, as it should be /less/styles.less. But I can seem to get it to point to the project root.

I've tried sourceMapBasepath and sourceMapRootpath options without any luck.

Thoughts?

Another thing is in my css file (/css/styles.css), I get this:

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjp... */

Why is it a base64 output? I thought it should just point to the styles.css.map file.

score 1 · Answer 1 · edited May 23 '17 at 11:58

1

with grunt-contribe-less 1.0.0

the following task

less: {
    options: {
      sourceMap: true,
      sourceMapRootpath: '/'

    },
    files: {'css/t.css' : 'less/t.less'}
  }

}

generate a css/t.css, and a css/t.css.map. The last file will be generated automatically without need to set sourceMapFilename.

The above does not generate a inline source map (with base64 output).

css/t.css ends with:

/*# sourceMappingURL=css/t.css.map */

Possible it depends of your version of grunt-contrib-less, see also Does grunt-contrib-less support --source-map-map-inline? (which describes inline source maps as you describe)

~~read: https://github.com/gruntjs/grunt-contrib-less~~

set sourceMapBasepath to /.

Why is it a base64 output? I thought it should just point to the styles.css.map file.

--

sourceMapFilename

Type: String Default: none

Write the source map to a separate file with the given filename.

edited May 23 '17 at 11:58

Community

1
1

answered Jan 25 '15 at 23:53

Bass Jobsen

48,736
16
143
224

I have `sourceMapBasepath: '/'`. No luck. And shouldn't `sourceMapFilename: 'public/css/styles.css.map'` take care of the base64 issue? – dmathisen Jan 26 '15 at 00:01
1

well, yes i did answer your question to quick. set `sourceMapRootpath: '/'` instead of `sourceMapBasepath`. – Bass Jobsen Jan 26 '15 at 00:32
Thanks. Now it seems to point the less file to the right path (`/less/styles.less`). But chrome throws a 404 on the file and I still get base64 sourceMappingUrl. – dmathisen Jan 26 '15 at 00:53
I'm on grunt-contrib-less 1.0.0 and tried removing sourceMapFilename but still see the base64 issue either way. – dmathisen Jan 26 '15 at 01:02
i only find a base64 data uri inline when the`sourceMapFileInline` had been set – Bass Jobsen Jan 26 '15 at 08:56

Less SourceMap absolute file paths using Grunt

1 Answers1