0

The problem

I'm using gulp-sourcemaps to generate sourcemaps for my compiled sass.

This seems to work on linux/mac computers, but not on Windows. Instead of the actual source sass, the content in the sourcemap is the same as the generated css.

P.S. I do not want to publish and link to the actual source files. I want them embedded in the souremap.


Details

Here's the full gulp task I'm using:

var autoprefixer = require('gulp-autoprefixer');
var gulp = require('gulp');
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('css', function () {
    gulp.src('resources/assets/sass/app.scss')
        .pipe(sourcemaps.init())
        .pipe(sass({ outputStyle: 'compressed' }))
        .pipe(autoprefixer())
        .pipe(rename('css/app.css'))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('public'));
});

And here's the folder structure:

├── gulpfile.js
|
├── resources
|   ├── assets
|       ├── sass
|           ├── app.scss
|
├── public
|   ├── css
|       ├── app.css
|       ├── app.css.map

Even more details

I'm running Windows 7 with Node v0.12.4. The global gulp version is 3.9.0.

Here's my package.json file:

{
  "private": true,
  "devDependencies": {
    "gulp-autoprefixer": "^2.3.1",
    "gulp": "^3.9.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.0.1",
    "gulp-sourcemaps": "^1.5.2"
  }
}

Here's the original source content in app.scss:

.div {
    color: red;

    .div {
        color: blue;
    }
}

Here's the generated CSS file:

.div{color:red}.div .div{color:blue}

/*# sourceMappingURL=../css/app.css.map */

And finally, here's the sourcemap file (prettified):

{
    "version":3,
    "sources":["app.css"],
    "names":[],
    "mappings":"AAAA,KAAK,SAAS,CAAC,UAAU,UAAU,CAAC",
    "file":"css/app.css",
    "sourcesContent":[".div{color:red}.div .div{color:blue}\n"],
    "sourceRoot":"/source/"
}

Conclusion

As you can see from all the above, the sourcesContent in the sourcemap file is simply the same as the generated CSS. This makes the sourcemap pretty useless.

What am I doing wrong here, and how can I fix it?


Here's a download of these files: gulp-sass-autoprefixer-sourcemaps.zip.

To test: extract it, then run npm install && gulp css.

Joseph Silber
  • 214,931
  • 59
  • 362
  • 292
  • I copied your css and code into a fresh project and it worked as expected. `sourcesContent` is the original source. Is everything up to date? – Justin Howard Jun 12 '15 at 14:48
  • Yes, I copy-pasted everything exactly. – Justin Howard Jun 12 '15 at 14:50
  • @JustinHoward - Whoops. My question before was missing the `authoprefixer`, which seems to be the culprit here. Removing it does properly retain the source. I added `autoprefixer` to the question. – Joseph Silber Jun 12 '15 at 15:13
  • Okay, added your package.json with autoprefixer, and updated the gulpfile. Still works for me. `sources` shows `app.scss` and the `sourcesContent` has the original sass source. Tried on linux and mac. I don't have windows available. – Justin Howard Jun 12 '15 at 15:17
  • @JustinHoward - hmmmm. I'm using Node `v0.12.4`. You? – Joseph Silber Jun 12 '15 at 15:21
  • I'm using the same node version. I don't think it matters but my system gulp version is 3.9.0. – Justin Howard Jun 12 '15 at 15:38
  • @JustinHoward - I'm out of ideas. I added a [download link](https://dl.dropboxusercontent.com/u/6484839/gulp-sass-autoprefixer-sourcemaps.zip?dl=1) for the exact files I'm using. Do you mind trying it? – Joseph Silber Jun 12 '15 at 16:35
  • Your test zip works for me. It's possible its a windows issue. `node-sass` the libsass binary, maybe something with that? I'm stumped though. – Justin Howard Jun 12 '15 at 16:43
  • @JustinHoward - apparently it's [a known issue](https://github.com/sindresorhus/gulp-autoprefixer/issues/38#issuecomment-111578573) with `gulp-sass`. – Joseph Silber Jun 12 '15 at 18:21

0 Answers0