1

I can't seem to figure out what is wrong with my configuration of gulp and gulp-sourcemaps. My main.css and main.css.map are compiled, yet I get incorrect sources:

{"version":3,"file":"main.css","sources":["/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css" [...] etc

It never displays anything other than main.css as a source. When I inspect via the browser and click on the source it shows me the last imported file in SCSS.

This is my Gulp task:

gulp.task('sass', function () {
    return gulp.src(config.sass.src)
        .pipe(sourcemaps.init({largeFile: true}))
        .pipe(sass().on('error', sass.logError ))
        .pipe(sourcemaps.write("."))
        .pipe(gulp.dest(config.sass.dest));
});

My config.sass.src is assets/sass/**/*.{sass,scss}

I also had some autoprefixer pipes and cssnano but I have commented all the extra things out and tried to run that as well, alas, same stuff.

Here is a minimal example of my SCSS:

main.scss:

@import "components/buttons";

components/_buttons.scss:

button {
    padding: 10px;
    background: black;
    color: white;
    border: 0;
    border-radius: 0;
}

This outputs the following in the css.map:

{"version":3,"file":"main.css","sources":["/assets/sass/main.css","/assets/sass/main.css"],"sourcesContent":["@import \"components/buttons\";","button {\n    padding: 10px;\n    background: black;\n    color: white;\n    border: 0;\n    border-radius: 0;\n}"],"mappings":"ACAA,AAAA,MAAM,CAAC;EACH,OAAO,EAAE,IAAK;EACd,UAAU,EAAE,KAAM;EAClB,KAAK,EAAE,KAAM;EACb,MAAM,EAAE,CAAE;EACV,aAAa,EAAE,CAAE,GACpB","names":[]}

Using:

  • gulp 3.9.1
  • gulp-sass 2.3.2
  • gulp-sourcemaps 1.10.0
Yates
  • 532
  • 7
  • 23
  • Nothing obviously wrong with your task. You'd have to provide a minimal SASS/SCSS file that reproduces the problem to have any chance of figuring this out. – Sven Schoenung Jan 11 '17 at 17:25
  • @SvenSchoenung done! I also added what my `config.sass.src` is, I thought the issue may be that I am using every scss/sass file as the source so I changed it to the path of `main.scss` and that did build the css, but the sourcemaps are exactly the same. – Yates Jan 11 '17 at 17:31

1 Answers1

1

It's a bug in the version of gulp-sourcemaps that you're using.

Updating from 1.10.0 to 1.10.1 should fix the issue:

npm install --save-dev gulp-sourcemaps
Sven Schoenung
  • 30,224
  • 8
  • 65
  • 70
  • I was just about to walk out of the door and go home, this worked! (I use yarn though but same principle). Where did you find this? I have searched for at least two hours using [terms like this](http://i.imgur.com/N7pq6hQ.png) and that's only search terms when I knew it was something to do with gulp-sourcemaps. In any case, thanks a bunch! All I need to do now is point to the correct source location but I can probably figure that one out myself tomorrow ;) – Yates Jan 11 '17 at 18:01
  • Well, after I was able to reproduce the problem with the info in your question the only explanation I could think of was a bug in `gulp-sourcemaps`. Tried upgrading the plugin and when that fixed it I went looking at [the recent commits](https://github.com/floridoo/gulp-sourcemaps/commits/v1.10.1) where [issue #270](https://github.com/floridoo/gulp-sourcemaps/issues/270) was linked. – Sven Schoenung Jan 11 '17 at 18:32