Встроенная исходная карта (созданная с помощью gulp-sourcemaps) не работает

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, все стили отображаются на строку 1 main.css, указывая, что что-то не так.

Теперь вот где это становится странным: если я запускаю эту же задачу, указывая на копии тех же файлов, в другом проекте с идентичной структурой каталогов, просто работающем под plain-ol 'apache, он работает точно так, как ожидалось. Выходные файлы выглядят точно так же.

У кого-нибудь есть понимание того, почему это будет?

FWIW, чрезвычайно похожий сценарий разворачивается при минимизации и конкатенации моих js, используя gulp-uglify а также gulp-concat

Answer 1

Попробуйте посмотреть, можете ли вы визуализировать разницу / сопоставления с помощью этого инструмента визуализации. Если оба скомпилированных файла в двух проектах одинаковы, то, скорее всего, это связано с тем, что вы предоставляете / получаете доступ к файлам по-разному? Во втором проекте вы также пытались просмотреть исходную карту через Chrome?

Просто чтобы уточнить, вы не только пишете встроенную исходную карту, вы также встраиваете свои источники, поэтому все находится в скомпилированном файле.css, внешние исходные исходные файлы не являются ссылочным источником (sourceRoot будет / источник /).