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

Question

我正在通过gulpjs构建中的无gulp使用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尝试加载较少的文件，并且使用完整路径作为源地图的输出，但是假设它是我网站的相对网址，因此它尝试加载http://localhost/Users/myuser/projects/project/web/css/myfile.less不存在。

我尝试使用工作区对其进行修复，但并没有真正进行管理。 此设置有问题吗？ 我想念什么吗？

Answer 1

我认为您缺少这些最后步骤：

1. 为您的站点创建一个工作区。 将Chrome指向系统上您网站的根目录。
2. 在“源”面板中右键单击较少源映射的文件，然后选择“映射到文件系统资源...”。 在文件系统上选择较少源文件。

重新加载开发工具（会得到提示），您应该会很好。 现在，在“样式”面板中单击foo.less:45时，应该在foo.less您带到该位置。 现在，您已经设置了工作区，如果您将更改保存在开发工具中，它将保存到少源文件中。 真好！

请注意，Chrome有一个很大的错误，您可能会立即注意到。 当您通过开发工具添加样式规则时，源映射将被破坏： 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

我在打字稿源映射中遇到了类似的问题-映射中的路径将生成为'../src/file.ts'，其中src与输出目录位于同一级别。
dir |- src/*.ts |- output/*.js

我的网络服务器直接在输出端运行，因此chrome尝试从http：//localhost/src/file.ts下载不存在的源文件
我的解决方案是在输出文件夹中创建一个符号链接“ src”，现在它很高兴。 不是真正的“解决方案”，而是解决了问题。

Answer 5

尝试以下方法：

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