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

我尝试使用工作区来修复它，但没有真正管理。这个设置有什么问题吗？我错过了什么吗？

Answer 1

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

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

重新加载开发工具（你会得到一个提示），你应该很好。现在，当您点击“样式”面板中的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'
    }))

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

5 个答案: