1

This is a bit of a weird one:

I've got a gulp task that looks like this:

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'));
});

I'm running this task from inside a play 1.3 project, and it generates the base64-encoded inline sourcemap, as expected, but when I load it up in chrome, all of the styles are mapping to line 1 of main.css, indicating that something is wrong.

Now, here's where it gets weird: if I run this same task, pointing at copies of the same files, in another project with an identical directory structure, just running under plain-ol' apache, it works exactly as expected. The output files appear exactly the same.

Does anyone have any insight as to why this would be?

FWIW, an extremely similar scenario plays out when minifying and concatenating my js, using gulp-uglify and gulp-concat

1 Answers1

0

Try see if you can visualize the difference/mappings via this visualizer tool. If both compiled files are exactly the same between the two projects then it's likely due to the different ways you are serving/accessing the files? With the 2nd project did you also try to view the sourcemap via Chrome?

Just to clarify, not only are you writing an inline sourcemap, you're also embedding your sources so everything is within the compiled .css file, the external original source files are not the referenced source(sourceRoot will be /source/).

Brennan
  • 305
  • 4
  • 19