Source map is absolute path but Chrome DevTool assumes it's a URL

Question

I am using LESS compiler via a gulp-less in my gulpjs build. I have enabled sourceMap generation, and it kind of works, the proper file names and line numbers are there.

The gulp line that generates LESS with source maps is very straight-forward:

var less = require('gulp-less');

// [...]

gulp.src('web/css/**/*.less')
    .pipe(less({
        sourceMap: true
    }))
    .pipe(gulp.dest('dist/css'));

The only problem is that the source map contains a URL to the original .less file and it is generated as an absolute path to my file system, e.g. /Users/myuser/projects/project/web/css/myfile.less.

During development, I serve the site via Apache. When I open the site with Chrome DevTools, I can inspect elements, and the source map is working because I can see the myfile.less including correct line numbers on the Styles panel. However, Chrome is trying to load the less file, and it is using the full path is the sourcemap output but assuming it's a relative url to my site, so it tries to load http://localhost/Users/myuser/projects/project/web/css/myfile.less which doesn't exists.

I tried using workspaces to fix it, but didn't really manage. Is there something wrong in this setup? Am I missing something?

Ardith

See various sourcemap options of the Less compiler (same options are available in gulp-less). – Epinephrine

Answer 1

I think you're missing these final steps:

1. Create a workspace for your site. Point Chrome to your site's root directory on your system.
2. Right-click on a source-mapped less file in the Sources panel, then select 'Map to File System Resource...'. Select the less source file on filesystem.

Reload the dev tools (you'll get a prompt) and you should be good. Now, when you click on the foo.less:45 in the Styles panel, you should be brought to that spot in foo.less. Now that you've setup the workspace, if you save your changes in the dev tools, it will persist to the source less file. Nice!

Note there's a pretty big bug with Chrome which you'll probably notice right away. When you go to add style rules via the dev tools, the source mapping gets busted: https://github.com/less/less.js/issues/1050#issuecomment-26195595

Let me know if this helps. I can post screenshots later, too, if needed.

Sumpter

Answer 2

Try to use sourceMapRootpath instead of sourceMapBasepath

gulp.src('web/css/**/*.less')
.pipe(less({
   sourceMap: true
   sourceMapRootpath: './my_less_path'
}))

For me this solution works in part because the files I'm importing inside another less files (eg. bower_components / .. / grid.less) still come with the absolute path. Still could not find a solution for this. If anyone can help would be great ... :)

Supercargo

Need a comma after sourceMap property – Cannular

Thanks @Pisandelli, but it seems the correct solution now is to use gulp-sourcemaps instead of the sourceMap properties. – Ardith

Answer 3

To answer my own question, the proper way to do this is to use gulp-sourcemaps in the gulp pipe instead of passing properties to the LESS plugin. So, the following syntax works for me:

gulp.src('web/css/**/*.less')
  .pipe(sourcemaps.init())
  .pipe(less())
  .pipe(sourcemaps.write())
  .pipe(gulp.dest('dist/css'));

Ardith

Answer 4

i was having a similar issue with typescript source maps -- the path in the maps would be generated as '../src/file.ts' where src was on the same level as output dir.
dir |- src/*.ts |- output/*.js

my webserver runs straight on output, so chrome was trying to download an inexisting source file from http://localhost/src/file.ts
my solution was to create a symlink 'src' inside the output folder and it is now happy. not a real 'fix' but solves the problem.

Gladysglagolitic

I found the idea to use symlink inspiring but it caused memory leak on my setup. I ended up copying the source map files instead and it worked fine. – Joesphjoete

Answer 5

Trying the following:

gulp.src('web/css/**/*.less')
    .pipe(less({
       sourceMap: true
       sourceMapBasepath: './my_less_path'
    }))

Desiraedesire

Unfortunately doesn't work. I have tried several options of sourceMapBasepath without success (relative paths, absolute paths, urls). – Ardith

+1, doesn't work for me either; thinking maybe this is an issue with gulp-less. – Patriciate