内联源映射(使用 gulp 源映射生成)不起作用

Question

这有点奇怪：

我有一个看起来像这样的大口大口的任务：

gulp.task('less', function () {
  gulp.src('./less/main.less')
    .pipe(sourcemaps.init())
    .pipe(less({
      plugins: [cleancss]
    }))
    .pipe(sourcemaps.write()) // will write the source maps to ./public/assets/css-dist/maps
    .pipe(gulp.dest(paths.public + 'css/dist'));
});

我正在从 play 1.3 项目内部运行此任务，它生成了 base64 编码的内联源映射，正如预期的那样，但是当我在 chrome 中加载它时，所有样式都映射到main.css的第 1 行，表明出了点问题。

现在，这就是它变得奇怪的地方：如果我在另一个具有相同目录结构的项目中运行相同的任务，指向相同文件的副本，只是在普通的 apache 下运行，它完全按预期工作。输出文件看起来完全相同。

有没有人知道为什么会这样？

FWIW，在使用gulp-uglify和gulp-concat最小化和连接我的js时，会出现极其相似的场景

Answer 1

尝试查看是否可以通过此可视化工具可视化差异/映射。如果两个项目之间的两个编译文件完全相同，那么可能是由于您提供/访问文件的方式不同？在第二个项目中，您是否还尝试通过Chrome查看源地图？

澄清一下，您不仅在编写内联源映射，而且还嵌入了源，因此所有内容都在编译的.css文件中，外部原始源文件不是引用的源（sourceRoot将是/source/）。