Source maps not working on Windows

[gabbsmo]

Passing the option sourceComments: 'map' causes the following error:

undefined:3
"file": "D:\gulp\Styles\variables.scss",
^
SyntaxError: Unexpected token g
at Object.parse (native)
at opts.success (D:\gulp\node_modules\gulp-sass\index.js:43:20)

Changing the value to 'normal' does work though.

Running gulp in Windows 8.1 using PowerShell.

[ghost]

To make it work in windows, I replace \ by / in map. And remove first node in all source url but I do this quick n'dirty in index.js for my project.

[jsbuzz]

To fix it nicely add this code

if(process.platform === 'win32' && opts.data.trim().substr(0,7) === '@import') {
  opts.data = opts.data.replace('/','\\');
}

to index.js at line 70 ( just before sass.render(opts) )

[Oikio]

Windows 8, same problem. @jsbuzz's fix didn't help.

stream.js:94
      throw er; // Unhandled stream error in pipe.
            ^
TypeError: Cannot call method 'trim' of undefined
    at nodeSass (E:\Projects\fronty-playground\node_modules\gulp-sass\index.js:69:51)
    at wrappedMapper (E:\Projects\fronty-playground\node_modules\gulp-sass\node_modules\map-stream\index.js:84:19)
    at Stream.stream.write (E:\Projects\fronty-playground\node_modules\gulp-sass\node_modules\map-stream\index.js:96:21)
    at Stream.ondata (stream.js:51:26)
    at Stream.EventEmitter.emit (events.js:95:17)
    at queueData (E:\Projects\fronty-playground\node_modules\gulp\node_modules\vinyl-fs\node_modules\map-stream\index.js:43:21)
    at next (E:\Projects\fronty-playground\node_modules\gulp\node_modules\vinyl-fs\node_modules\map-stream\index.js:71:7)
    at E:\Projects\fronty-playground\node_modules\gulp\node_modules\vinyl-fs\node_modules\map-stream\index.js:85:7
    at E:\Projects\fronty-playground\node_modules\gulp\node_modules\vinyl-fs\lib\src\bufferFile.js:8:5
    at fs.js:266:14

[Tom910]

Correction index.js, did not help, the error as above.
win 8.1

[ghost]

Windows 8.1

Had to do this in order to make it work. The problem in our setup is that the paths are absolute on Windows while they are relative on Mac, so I had to simply remove the absolute path in order to create relative paths for Windows and just do a replace of slashes just to be sure.

  function nodeSass (file, cb) {
    if (process.platform == "win32") {
      file.path = path.relative(".", file.path)
      file.path = file.path.replace(/\\/g, "/");
    }

[igregson]

Was having this same problem on Windows 7.
the if statement given @quinyx did the trick. Many thanks.

[hergaiety]

Any chance quinyx's solution could make it into the official package? It'd be great to not have to edit node modules manually, feels dirty.

[davidgilbertson]

Hey all, I'm new to node and gulp and streams but could you take the nice @quinyx solution and bring it up into the gulpfile like so?

gulp.task('styles', function() {
  return gulp.src('app/styles/main.scss')
    .on('data', function(file) {
      if (process.platform == "win32") {
        file.path = path.relative(".", file.path);
        file.path = file.path.replace(/\\/g, "/");
      }
    }).pipe(sass({
      sourceComments: 'map'
    }))
    .pipe(gulp.dest('.tmp/styles'));
});

As a workaround it feels less dirty than fiddling with the module directly.

[jsbuzz]

Hey David,

If that works that is the best idea so far. I mean until the fix makes it into the master of course.
I think I was too busy debugging the module to realize that you can fix it from outside as well.

Cheers!

(I already switched to Ubuntu though as a lot of other gulp modules also didn't work on windows...)

[igregson]

@davidgilbertson Many thanks for this... certainly, editing the core gulp-sass module was dirty, this is a much better solution (temporary as it may be until the fix makes it into the master).

@jsbuzz Might I ask if you went with a native Ubuntu install or a VM setup? I'm currently considering a new setup, so I'm looking at different options and curious about what's working for other developers.

[davidgilbertson]

@IsaacEG No problems.
I run Ubuntu inside Hyper-V on Win8 and it works a treat. There's a nice Chrome app called Secure Shell that can replace PuTTY (for my needs at least) so it was a pretty simple setup.

[jsbuzz]

@IsaacEG I have a native Ubuntu with a boot manager next to my win7 - I kept it for office activities and intensive IE testing. But I really like the Ubuntu so I'll stick with it for now. After setting up the nvidia driver all works great, before that it was crappy though.

[hergaiety]

@davidgilbertson wonderful solution thanks! I've implemented that into our project and it seems to work very well and it's a pretty clean fix.

It's worth noting that your fix requires a small require to one's gulp file (one that's super useful anyway) var path = require('path') so I'm just leaving that note here for others as clarity in case they get an undefined error.

[MaciejJanyska]

@davidgilbertson your solution works like a charm! Thank you so much.

[davidgilbertson]

A little update, I was using it in a few tasks so I've DRYed it out a little so that each task only needs .on('data', processWinPath) to sort out the paths.

var processWinPath = function(file) {
  var path = require('path');
  if (process.platform === 'win32') {
    file.path = path.relative('.', file.path);
    file.path = file.path.replace(/\\/g, '/');
  }
};

gulp.task('styles', function() {
  return gulp.src('app/styles/**/*.scss')
    .on('data', processWinPath)
    .pipe(sass())
    .pipe(gulp.dest('.tmp/styles'));
});

[yantakus]

There is a pull request which fixes this problem much more elegantly: #45

[Jarrydcrawford]

In regards to the update from @davidgilbertson, it's making my sass task fail silently and breaking the watch task on a syntax error. I've got gulp-autoprefixer and gulp-sass enabled with sourceMap: 'sass' and sourceComments: 'map' as options. Anyone else having this issue? Windows 8.1 here.

Removing the processWinPath function and any referencing to sourcemapping fixes the issue.
My gulpfile.js - https://gist.github.com/Jarrydcrawford/84e39117386c37f3eb99

[yantakus]

@Jarrydcrawford Yes, I had the same issues with @davidgilbertson's solution. So I switched to this pull request which works fine. But, unfortunately, it is not updated accordingly to gulp-sass (it is not the latest version now).

[yantakus]

I found another solution for the path problem. Just add the base property for gulp.src. For example:

return gulp.src(
    ['app/styles/**/*.scss'],
    {base: 'app/'}
  )

But it anyway fails silently if soureMap option is enabled and there is a syntax error in scss styles.

Update. It worked for me for some time but now it doesn't for some reason. This is really weird. Can anyone test if it helps?

[Jarrydcrawford]

@web2style I tried the pull request from #45 which works great with gulp-sass and gulp-autoprefixer until I add the sourceComments/sourceMap to the options. Syntax errors still fail silently and break the watch. Tried your base solution with no success either. Gah!

[yantakus]

This is so weird. I used gulp-ruby-sass, which needs base option to work properly. Then I switched back to gulp-sass and it worked well with source mapping enabled. Until I reinstalled gulp-sass once again (tried a pull request). This was a bug I think. A pleasant one I should say.

So doesn't everybody (I mean windows users) use source maps?

I just want to use foundation in my project, so sass is the only option. Gulp-ruby-sass is unreally slow (takes 7 seconds to compile my project vs 500ms with gulp-sass). But I can't use source maps with gulp-sass and this is absolutely useless without it.

This is so sad. Any ideas?

[dlmanning]

This is no longer relevant since gulp-sass has switched to using gulp-sourcemaps