dlmanning / gulp-sass Goto Github PK

When I run gulp-sass, it does not include the file name of the file that failed compilation:

[gulp] Error in plugin 'gulp-sass': source string:1: error: invalid top-level expression

How can I tell which file that error occurred in?

Here is my gulp task:

var sass = require('gulp-sass');
  gulp.src('./**/!(_)*.scss')
  .pipe(sass({ outputStyle: 'compressed' }))
  .pipe(gulp.dest('.'));

I don't know if is a libsass issue or what, but it's not working on node 0.11.12

Hi,

Is there any option to pass and enable the new source-maps feature?

Thanks.

I just got all setup, everything seemed to be working on a small test project, but when I moved it over to a small project that is already partially done I get this error:

stream.js:94
    throw er: // Unhandled stream error in pipe.

[<-[32mgulp<-[39m] Error in plugin '<-[36mgulp-sass<-[39m': source string:4: error: unbound variable $br1

    at opts.error (C:\projects\my_project\node_module\gulp-sass\index.js:35:17)

What does this mean?

Note:
Previously I was using prepros to manage my sass and js.

sass-wrapper is wrapped around sass' gem instead of node-sass package based on the buggy libsass.

I have a main.scss file which contains @import directives.

The first line of the first @import file is a placeholder selector.

This throws an error Please check the validity of the CSS block.

The task works when the placeholder is changed to a mixin.

Can this great gem be used in conjunction with gulp-sass?

https://github.com/chriseppstein/sass-globbing

Hi, I get this error from your module:

[gulp] Starting 'styles'...

stream.js:94
      throw er; // Unhandled stream error in pipe.
            ^
[gulp] Error in plugin 'gulp-sass': source string:54: error: property "solid" must be followed by a ':'

    at opts.error (/Users/ejohnson/Git/matchstickjs.com/node_modules/gulp-sass/index.js:67:17)
    at onError (/Users/ejohnson/Git/matchstickjs.com/node_modules/gulp-sass/node_modules/node-sass/sass.js:72:16)

Here's my task:

// Minify and combine all CSS
gulp.task('styles', ['clean'], function() {
    return gulp.src([
        'assets/scss/*.scss'
        'assets/bower/bootstrap/dist/css/bootstrap.css',
        'assets/bower/fontawesome/css/font-awesome.css'
    ]).pipe(gulpif(/[.]scss$/, sass()))
        .pipe(minify())
        .pipe(concat('all.min.css'))
        .pipe(gulp.dest('build/css'));
});

Here's my SCSS (I haven't converted it to SASS yet because I can't get this working

/*!
 *  Custom Styles
 */

/* Color pallete
@dark-gray:   #777777;
@orange:      #ee7733;
@orange-dark: #cc6633;
@tan:         #ffffee;
@light-gray:  #ddddcc;
@peach:       #eeccaa;
*/

/* Fonts */
@font-face {
    font-family: 'Open-Sans';
    src: url('/fonts/Open-Sans.eot');
    src:
        url('/fonts/Open-Sans.eot?#iefix') format('embedded-opentype'),
        url('/fonts/Open-Sans.woff') format('woff'),
        url('/fonts/Open-Sans.ttf') format('truetype');
}

@font-face {
    font-family: 'SourceCodePro';
    src: url('/fonts/SourceCodePro.eot');
    src:
        url('/fonts/SourceCodePro.eot?#iefix') format('embedded-opentype'),
        url('/fonts/SourceCodePro.woff') format('woff'),
        url('/fonts/SourceCodePro.ttf') format('truetype');
}

@font-face {
    font-family: 'Merriweather';
    src: url('/fonts/Merriweather.eot');
    src:
        url('/fonts/Merriweather.eot?#iefix') format('embedded-opentype'),
        url('/fonts/Merriweather.woff') format('woff'),
        url('/fonts/Merriweather.ttf') format('truetype');
}

/* Base styles */
* { font-family:'Merriweather'; }
html, body { margin:0; padding:0; background:#ee7733 url('/img/bg.png'); }
a { color:#ee7733; }
a:hover { color:#cc6633; text-decoration:underline; }
pre code { font-family:'SourceCodePro'; border:0; }
code { font-family:'SourceCodePro'; color:#ee7733; background-color:#f5f5f5; border:1px solid #ccc; }
.container { padding:20px; background-color:#ffffee; }

/* Header */
header { color:#777; }
#links { text-align:center;  }
#links ul { list-style:none; margin:0; padding:0; font-size:1.1em; }
#links ul li { display:inline-block; margin:0 0.5em; line-height:1.5em; }
#links ul li small { font-size:1.1em; }

/* Share buttons */
ul#share { list-style:none; text-align:center; margin-top:2em; }
ul#share li { display:inline-block; }

/* Main Section */
main.container { color:#000; padding-top:0; }
h1 { text-align:center; margin-top:0; }
h1#page-not-found { margin-top:2em; }
h2, h3 { font-family:'Open-Sans',sans-serif; }
h2 { background-color:#777; solid #000; color:#fff; padding:10px 35px; margin-top:40px; margin-left:-35px; margin-right:-20px; position:relative; }
h2:after { content:""; display:block; color:#fff; bottom:-15px; left:0; position:absolute;
        width: 0; z-index:0; height: 0; 
        border-bottom:15px solid transparent;
        border-right:15px solid #333; }
h3 { margin-top:28px; font-weight:bold; }
h4 { margin-top:28px; font-weight:bold; }

/* Footer */
footer { text-align:center; color:#777; border-top:dashed 1px #ccc; margin:auto 1em; }

/* Media Queries */
@media (min-width: 1200px) {
    .container { max-width:750px; }
}

Any help is appreciated. Thanks!

libsass had an update to support BEM style selector syntax yesterday.

These new features have made it in to node-sass already.

I got the impression gulp-sass just references node-sass, but this syntax doesn't appear to be working yet in gulp-sass. Does it just need an import and a version bump?

I'm getting the following when trying to npm install gulp-sass:

npm http GET https://registry.npmjs.org/gulp-sass
npm http 304 https://registry.npmjs.org/gulp-sass
npm http GET https://registry.npmjs.org/gulp-sass/-/gulp-sass-0.7.1.tgz
npm http 503 https://registry.npmjs.org/gulp-sass/-/gulp-sass-0.7.1.tgz
npm ERR! fetch failed https://registry.npmjs.org/gulp-sass/-/gulp-sass-0.7.1.tgz

Is this because you haven't tagged any releases?

It seems that the current edition of gulp-sass cannot handle Chinese comments correctly, but the original sass command line tool can do it correctly with a line of @charset "UTF-8"; at the output css file's beginning. Hope this bug can be fixed in the near future. Thanks.

Please, see https://github.com/sindresorhus/gulp-size/blob/master/index.js#L12-L14 for right handling of isNull files.

Just checking is this using the latest build of libsass, some improvements have been made recently with @extend and also source maps are now supported

If I have a main.scss, with multiple @include's in it, and then use the @extend inside of some of those that reference others, it simply doesn't work our output anything. If I compile the same using the ruby version it does do the proper extend.

It would be great to avoid having to restart gulp every time I make a typo in my sass file. Is it something I can work around?

Please, upgrade to support of sass 3.3

Input:

%menu {

    background: black;

    ul {
        padding: 0;
        margin: 0;
    }

    li {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    a {
        text-decoration: none;
    }
}

.main-menu {
    @extend %menu;
    background: lightgrey;
    width: 100%;
}

Expected:

.main-menu {
  background: black; }
  .main-menu ul {
    padding: 0;
    margin: 0; }
  .main-menu li {
    list-style: none;
    padding: 0;
    margin: 0; }
  .main-menu a {
    text-decoration: none; }

.main-menu {
  background: lightgrey;
  width: 100%; }

Actual output:

.main-menu {
  background: black; }
  %menu ul {
    padding: 0;
    margin: 0; }
  %menu li {
    list-style: none;
    padding: 0;
    margin: 0; }
  %menu a {
    text-decoration: none; }

.main-menu {
  background: lightgrey;
  width: 100%; }

The same happens when you use actual classes instead of placeholders.

I don't know if it's gulp-sass implementation (and as soon as I figure out a good solution, I'll do the PR) but... let's say you've the following structure:

root
├── src/sass
└── dist/css

It will output:

I'm achieving the "src to dist" by task:

// Compile all components .scss into the corresponding .css
gulp.task('sass', function () {
    return gulp.src(paths.src.css)
        .pipe(sass({
            errLogToConsole: true,
            sourceComments: 'map'
        }))
        .pipe(rename(function (dir, base, ext) {
            return '../css/' + base + ext;
        }))
        .pipe(gulp.dest(paths.dest.css));
});

Two questions:
1- Any idea how to prevent the usage of gulp-rename to achieve the same folders' setup?
2- Any idea on how to set a relative path to the sourceMap contents? This one might get auto-fixed once I've a good answer for the first one.

Thank you all!

Hi !

With the last version 0.7.2, I've a problem with installing gulp-sass.
No problem when I go back to 0.7.1 (which use ~0.8 version of node-sass).

npm install --save-dev gulp-sass

npm ERR! Error: ENOENT, open './node_modules/gulp-sass/node_modules/node-sass/node_modules/nan/package.json'
npm ERR! If you need help, you may report this *entire* log,
npm ERR! including the npm and node versions, at:
npm ERR!     <http://github.com/npm/npm/issues>

npm ERR! System Darwin 14.0.0
npm ERR! command "node" "/usr/local/bin/npm" "install" "--save-dev" "gulp-sass"
npm ERR! cwd .
npm ERR! node -v v0.10.29
npm ERR! npm -v 1.4.14
npm ERR! path ./node_modules/gulp-sass/node_modules/node-sass/node_modules/nan/package.json
npm ERR! code ENOENT
npm ERR! errno 34

I have two files styles.scss and partials/_vars.scss.
Changes in _vars.scss is not automatically compiling to produce desired css file.

We get this error since we upgraded from version 0.7.1 to 0.7.2:

nan.h:1725: bool _NanGetExternalParts(v8::Handle<v8::Value>, const char**, size_t*): Assertion `val->IsString()' failed.

Hey guys, i want to use gulp-sass with SUSY. The only problem is gulp-sass does not support sass 3.3 syntax. I hope you guys will update the plug-in ! :)

Not sure why but I'm getting the error:

[gulp-sass] source string:13: error: file to import not found or unreadable: "compass"

Here's the related part of my gulpfile:

// Styles
gulp.task('css-main', function(cb) {
    return gulp.src([
            paths.source + '/css/style.scss'
        ])
        .pipe(sass({errLogToConsole: true}))
        .pipe(plugins.minifyCss({ keepSpecialComments: 1, keepBreaks : true }))
        .pipe(gulp.dest( paths.build + '/css'))
        .pipe(plugins.notify({ message: 'Styles task complete' }))
        .pipe(livereload(server))
        .on('error', handleError)
    ;
});

And here's first part of style.scss

// Compass imports
@import "compass";
@import "compass/utilities";

// FOUNDATION OVERRIDES
@import "partials/foundation/settings";
@import "partials/foundation/components/top-bar";

Cannot figure it out. Is it a compass/sass version problem:

$ compass -v
Compass 1.0.0.alpha.19
Copyright (c) 2008-2014 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

$ sass -v
Sass 3.3.4 (Maptastic Maple)

gulp-sass does not seem to want to compile bootstrap's sass files and it appears to be gulp-sass's fault. I make this assumption because bootstrap's .scss compiles fine with sass's gem.

I get this error message when I use gulp-sass:

stream.js:94
      throw er; // Unhandled stream error in pipe.
            ^
[gulp] Error in plugin 'gulp-sass': /Users/ptrckbrwn/Projects/remindme-git/remind_me/remind_me/scss/bootstrap/mixins:365: error: non-terminal statement or declaration must end with ';'

Here is line 365 in Bootstrap's _mixins.scss:

360 // Retina images
361 //
362 // Short retina mixin for setting background-image and -size
363
364 @mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
365   background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$file-1x}"), "#{$file-1x}"));
366

And, finally, my gulpfile.js:

var gulp = require('gulp');

var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var sass = require('gulp-sass');

var paths = {
   scripts: 'remind_me/remind_me/js/*.js',
   styles: 'remind_me/remind_me/scss/*.scss'
};

gulp.task('scripts', function() {
  // Minify and copy all JavaScript (except vendor scripts)
  return gulp.src(paths.scripts)
    .pipe(uglify())
    .pipe(concat('scripts.min.js'))
    .pipe(gulp.dest('remind_me/static/js'));
});

gulp.task('styles', function() {
  // Minify and concat ass sas files.
  return gulp.src(paths.styles)
    .pipe(sass())
    .pipe(concat('styles.min.css'))
    .pipe(gulp.dest('remind_me/static/css'));
});

gulp.task('default', ['scripts', 'styles']);

If I include the calc function in a scss-file, watch will detect the change and then gulp exits silently.

Running on Windows 8 with Node 0.10.26.

A zipball for demonstration: http://ge.tt/4veQj6N1/v/0?c

I have a tiered structure in my app/assets/sass/ directory which I am trying to mirror in the CSS output files in public/css/, but all the *.scss files in my sass directory and subdirectories are being put into the root public/css/ folder.

Here is my gulpfile:
When I comment out the lines between gulp.src(sassDir ...) and .pipe(gulp.dest('public/css')); the directory structure is maintained, but the sass is not compiled. Uncommenting the .pipe(sass(...)) line reproduces the issue.

var gulp = require('gulp');
var plumber = require('gulp-plumber');
var gutil = require('gulp-util');
var minifycss = require('gulp-minify-css');
var autoprefixer = require('gulp-autoprefixer');
var sass = require('gulp-ruby-sass');
var coffee = require('gulp-coffee');

var sassDir = 'app/assets/sass/';
var coffeeDir = 'app/assets/coffee/';

gulp.task('sass', function() {
    return gulp.src(sassDir + '**/*.scss', { base: sassDir })
        .pipe(plumber())
        .pipe(sass({ style: 'compress' }).on('error', gutil.log))
        .pipe(autoprefixer('last 10 versions'))
        .pipe(minifycss())
        .pipe(gulp.dest('public/css'));
});

gulp.task('coffee', function() {
    return gulp.src(coffeeDir + '**/*.coffee', { base: coffeeDir })
        .pipe(plumber())
        .pipe(coffee({ bare: true }).on('error', gutil.log))
        .pipe(gulp.dest('public/js/coffee)'));
});

gulp.task('watch', function() {
    gulp.watch(sassDir + '/**/*.scss', ['sass']);
    gulp.watch(coffeeDir + '/**/*.coffee', ['coffee']);
});


gulp.task('default', ['sass', 'coffee', 'watch']);

error: invalid
selector after &

should work like this - http://codepen.io/tevko/pen/IwEjn

When using :host() syntax in scss (which is a syntax you need to style web components, because they have encapsulated style) I get the following error from gulp-sass:

stream.js:94
      throw er; // Unhandled stream error in pipe.
            ^
[gulp] Error in plugin 'gulp-sass': source string:24: error: invalid argument to :host(...)

    at opts.error (/Users/pp/projects/polyonic/polyonic-button/node_modules/gulp-sass/index.js:67:17)
    at onError (/Users/pp/projects/polyonic/polyonic-button/node_modules/gulp-sass/node_modules/node-sass/sass.js:72:16)

However, when compiling the same file with sass from the command line, it works.

Installed sass version is Sass 3.2.13 (Media Mark). So this has either something to do with this plugin, or with the sass implementation that is used by this plugin (AFAIK it uses node-sass, so maybe this issue has to be filed there).

Lemme know, if I can do anything to help out!

I'm having an issue with the parent file not re compiling when an import is changed.
For example, I have a base file called global.scss which imports a partial _header.scss.

But when the _header.scss is changed, it doesn't recompile global.scss.
The watch task is seeing the file being changed but its parent doesn't recompile.

[gulp] _header.scss was changed

Watch function:

// Watch SCSS
    gulp.src(input_paths.styles, { read: false })
        .pipe(plumber())                                // Keeps pipes working after error event
        .pipe(watch())                                  // Watches for file changes
        .pipe(scss( scss_options ))                     // SCSS compiler
        .pipe( gulp.dest( output_paths.styles ) )       // Output destination
        .pipe(livereload(server))                       // Reload the page
        .pipe( notify( notify_options ) );              // Notify what file was changed

scss_options variable:

// Sass
    var scss_options = {
        outputStyle: 'compressed', // variables - https://github.com/andrew/node-sass
        errLogToConsole: false,
        onError: function(err) {
            notify().write(err);                    // Growl it.
            console.log(gutil.colors.red(err));      // Log the occurred error.
            process.stdout.write('\x07');          // Beep boop the terminal.
        }
    };

Not 100% sure this is a gulp-sass issue though.

Just noticed this while trying to integrate Gulp into a WordPress theme I'm building. Can't output my .scss into the required style.css file in the theme's root. Not sure if I'm missing something, but this kind of functionality seems necessary.

Ex:

gulp.task('sass', function() {
  gulp.src('./scss/*.scss')
      .pipe(sass())
      .pipe(gulp.dest('style.css'));
});

This sounds and is really strange, but considering the follow gulp file:

// Compile Our Sass
gulp.task('sass', function() {
    gulp.src(options.SASS_SOURCE)
        .pipe(plumber())
        .pipe(sass({
            // includePaths: ['./sass'],
            outputStyle: 'compressed'
            }))
        .on("error", notify.onError())
        .on("error", function (err) {
            console.log("Error:", err);
        })
        .pipe(prefix(
            "last 1 version", "ie 10"
            ))
        .pipe(gulp.dest(options.CSS_DEST))
        .pipe(livereload(server));
});

// Refresh HTML changes
gulp.task('html', function() {
  gulp.src('views/**/*.php')
    // .pipe(changed('views/**/*.php'))
    .pipe(livereload(server));
});

gulp.task('default', function () {
  gulp.watch(options.SASS_SOURCE, function () {
      gulp.run('sass');
  });
});

gulp.task('watch', function () {
  server.listen( options.LIVE_RELOAD_PORT , function (err) {
    if (err) return console.log(err);

    // Watch .SCSS files
    gulp.watch( options.SASS_SOURCE , function (event) {
        console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
        gulp.run('sass');
    });

  });
});

If I run the default task the compiler works just fine, and outputs everything as expected.

If I run the "watch" task the compiler outputs errors for files not found, files that are compiled just fine with the default task.

Any ideia of what might be going on?

There is no mention of controlling whether you want a compressed output CSS file or not. (in the README file)

It appears gulp-sass is not equiped to handle the !global keyword.

I am attempting to use the Neat SCSS framework, which uses a lot of !global keywords in it's .scss files.

For instance:

$parent-columns: $grid-columns !global;

Throws the following error:

stream.js:94
      throw er; // Unhandled stream error in pipe.
        ^
[gulp] Error in plugin 'gulp-sass': /my-project/scss/neat/grid/private:27: error: 
error reading values after $grid-columns at opts.error (/my-project/node_modules/gulp-sass/index.js:67:17)

When active .pipe(sass({sourceComments: 'map'})) throws an error with gulp-autoprefixer. Otherwise, it works with gulp-autoprefixer without sourcemaps active.

Right now if any of my sass files have an @import in them I get an error like this:

stream.js:94
      throw er; // Unhandled stream error in pipe.
            ^
source string:1: error: file to import not found or unreadable: 'normalize'

Where normalize is a normalize.scss in the same directory.

This seems to be because you are using the data option without an includePaths.

This could maybe be solved with an includePaths option?

gulp.src('./styles/main.scss')
  .pipe(sass({includePaths: ['./styles']}))
  .pipe(gulp.dest('./styles'))

The Example in the README.md doesn't work for me. I got an error message, because it doesn't found the settings.scss;

stream.js:94
      throw er; // Unhandled stream error in pipe.
            ^
[gulp] Error in plugin 'gulp-sass': source string:1: error: file to import not found or unreadable: "includes/_settings"

I used the gulpfile.js from the example:

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
    gulp.src('./scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
});
gulp.task('default',['sass']);

The failure was thrown by the @import in style.scss. When i import it like

@import "scss/includes/_settings";

it would work. That means it will use the Working and not the localdir. I wrote a little Workaround for that, but it will be better to set a root-Path to the options wich will be added to opts.includePaths.

module.exports = function (options) {
  var opts = options ? options : {};

  function nodeSass (file, cb) {
    var fileDir = path.dirname(file.path);
    fileDir = path.relative(__dirname,fileDir);
    var tmp = [];
    fileDir.split(path.sep).forEach(function(element) {
      if ('..' != element)
        tmp.push(element);
    });
    fileDir = tmp.join(path.sep)+path.sep;

[...]

I hope it will help,

thanks..

Hi,
There is a differrence between gulp-sass and grunt-sass.
With grunt-sass, I don't need to specify includePaths and partials are correctly imported...

Is it possible to have the same behavior?

Example :
https://github.com/ghoullier/libsass

This code failing (file styles.css doesn't appear in target url.):

gulp.task('scss', function() {
    gulp.src('./sources/scss/_styles.scss')
        .pipe(sass({
            outputStyle: 'compressed'
        }))
        .pipe(gulp.dest('./dev-build'));
});

Content of the _styles.scss is valid.

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.

Hi,

I would like a --debug-info flag so I can use it with firesass :)

It would be nice if the plugin would report errors found in all scss files instead of just the first. Some other plugins I use (gulp-tsc & gulp-tslint) work this way.

When running the task, it compiles the Sass, but doesn't change the extension to .css. Gulp v3.0.0. To remedy, using the rename plugin works, but not the ideal solution:

gulp.task('sass', function () {
    gulp.src('./sass/test.scss')
        .pipe(rename({ext: '.css'}))
        .pipe(sass())
        .pipe(gulp.dest('./css/test'));
});

Cheers
Mark

Maybe this is an issue with node-sass but using the outputStyle: 'expanded' the output looks the same as nested. Using 'compressed' seems to work though.

Hi there,

I'm using Sass 3.3.0.rc.1 with gulp-sass and everything is working great except for one little thing (which I can live without but just thought I'd bring up in case anyone can help). I've been using BEM style syntax on recent projects and use Scott Kelum's handy little mixin (below) which uses Sass 3.3's @at-root.

@mixin e($name) {@at-root #{&}__#{$name} {@content;}}
@mixin m($name) {@at-root #{&}--#{$name} {@content;}}

When I run this through gulp sass I get an "Unhandled stream error in pipe. Error reading values after "blank space" at ops.error".

Bit of a noob to how gulp sass works so excuse my ignorance... when I run this using sass watch it compiles fine but when I use gulp watch I get the error above. Is this due to node-sass not supporting Sass 3.3 syntax yet?

Any help would be greatly appreciated. Cheers.

Stephen.

body /deep/ {
    font-family: 'Lato', 'Helvetica', sans-serif;
}

throws the following error:

[gulp-sass] /Users/jeshuamaxey/app/public/css/src/base/typography:1: error: invalid top-level expression

I'm using gulp-sass v0.7.1

This is a syntax used for styling elements in the Shadow DOM. Compiling with sass (Sass 3.3.0.rc.5 (Maptastic Maple)) on the command line throws no error. This bug is similar in vein to #58.

Libsass has just updated to 2.0 and it would be awesome if the gulp-sass could be updated to use this.

How do I go about using Sass Syntax in gulp-sass ?

Is there a way to add a callback for when SASS succeeds/fails to compile, like in node-sass?

success: function(css){
  console.log(css)
  // Custom stuff
  },
  error: function(error) {
    console.log(error);
    // Custom stuff
},

Thanks!

When I add sourceComments: 'map' option, I get the following error:

If I add sourceMap: 'path'

I have the contents of compiled .css file replaced with the following:

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiIiwic291cmNlcyI6WyJhcHAvc3R5bGVzL21haW4uc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiIl19*/

It occurs regardless of the path I pass to sourceMap.

Here is my task:

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/main.scss')
    .on('data', processWinPath)
    .pipe($.sass({
       errLogToConsole: true,
       sourceMap: 'path',
       sourceComments: 'map'
    }))
    .pipe(gulp.dest('.tmp/styles'))
    .pipe($.size());
});

processWinPath is a fix for windows from #28.

Wondering if the following issue fix has been folded in to the verison of libsass used

sass/libsass#231