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

Question

我在我的gulpjs构建中通过gulp-less使用LESS编译器。我已经启用了sourceMap生成，它有点工作，正确的文件名和行号在那里。

用源映射生成LESS的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指向您的站点的根目录。
2. 右键单击源面板中的源映射的less文件，然后选择"映射到文件系统资源…"。在文件系统中选择较小的源文件

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

注意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管道中使用gulp-sourcemaps，而不是将属性传递给LESS插件。因此，下面的语法适合我:

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

Answer 4

我在typescript源映射中遇到了类似的问题——映射中的路径将生成为'../src/file '。在这里，SRC与输出dir处于同一级别。dir |- src/*.ts |- output/*.js

我的web服务器在输出上直接运行，所以chrome试图从http://localhost/src/file.ts下载一个不存在的源文件
我的解决方案是在输出文件夹中创建一个符号链接'src'，现在它很高兴。不是真正的"修复"，但解决了问题。

Answer 5

尝试以下内容:

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