使用Grunt减少SourceMap绝对文件路径

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.

Answer 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.