Sourcemaps content same as compiled output - on Windows

125 views Asked by At

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.

0

There are 0 answers