源地图是绝对路径，但Chrome DevTool假定它是一个URL

Question

在我的gulpjs版本中，我通过一个gulp-less使用了LESS编译器。我已经启用了sourceMap生成，并且工作正常，正确的文件名和行号都在那里。

使用源地图生成较少的gulp行非常简单：

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

// [...]

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

唯一的问题是，源映射包含指向原始.less文件的URL，并且它是作为我的文件系统(例如/Users/myuser/projects/project/web/css/myfile.less )的绝对路径生成的。

在开发过程中，我通过Apache为站点提供服务。当我使用Chrome DevTools打开网站时，我可以检查元素，并且源地图正在工作，因为我可以在样式面板上看到包含正确行号的myfile.less。然而，Chrome正在尝试加载较少的文件，它使用的是源地图输出的完整路径，但假设它是我网站的相对url，所以它试图加载不存在的http://localhost/Users/myuser/projects/project/web/css/myfile.less。

我试着使用工作区来修复它，但并没有真正成功。这个设置有什么问题吗？我是不是遗漏了什么？

Answer 1

我认为你错过了这些最后的步骤：

1. 为您的网站创建工作区。将Chrome指向system.
2. Right-click上的根目录，然后在源面板中选择“映射到文件系统资源...”。选择filesystem上较少的源文件。

重新加载dev工具(您将得到一个提示)，您就应该很好了。现在，当你点击样式面板中的foo.less:45时，你应该会被带到foo.less中的那个地方。现在您已经设置了工作区，如果您在dev工具中保存您的更改，它将保存到无源文件中。好的!

注意，Chrome有一个很大的bug，你可能马上就会注意到。当您通过开发工具添加样式规则时，源映射被破坏：https://github.com/less/less.js/issues/1050#issuecomment-26195595

如果这有帮助，请告诉我。如果需要，我也可以稍后发布截图。

Answer 2

尝试使用sourceMapRootpath而不是sourceMapBasepath

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

对我来说，这个解决方案之所以有效，部分原因是我在另一个文件中导入的文件较少(例如，bower_components / ../ grid.less)仍然带有绝对路径。仍然找不到解决方案。如果有人能帮上忙那就太好了... :)

Answer 3

为了回答我自己的问题，正确的方法是在吞咽管道中使用gulp-sourcemaps，而不是将属性传递给LESS插件。因此，下面的语法适用于我：

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