New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Problem with gulp-sass ? Or gulp-autoprefixer ? Or gulp-sourcemaps ? #60

Closed
ByScripts opened this Issue Nov 8, 2014 · 28 comments

Comments

Projects
None yet
@ByScripts

ByScripts commented Nov 8, 2014

Hi,

There is a lot of issue about mixing gulp-sass and/or gulp-autoprefixer with gulp-sourcemaps.

For example : dlmanning/gulp-sass#106, sindresorhus/gulp-autoprefixer#8

I just spend 2 hours debugging to find out where the problem come from, and still no success.

But I finally noticed something (but still don't know where the problem come from).

In source-map-generator.js @ Line 359, I watched the key value.

In this configuration:

gulp.task('css', function () {
    gulp.src('./assets/sass/style.scss')
        .pipe(sourcemaps.init())
        .pipe(sass())
        //.pipe(sourcemaps.write({includeContent: false}))
        //.pipe(sourcemaps.init({loadMaps: true}))
        .pipe(autoprefixer())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./public/css'))
});

The value of the key is $style.css, and it does not work

But in this configuration:

gulp.task('css', function () {
    gulp.src('./assets/sass/style.scss')
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(sourcemaps.write({includeContent: false}))
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(autoprefixer())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./public/css'))
});

The value of the key is $style.scss, and it works

Because with the two configurations, _sourcemapContents in source-map-generator.js#360 has always a $style.scss key.

Hope this helps to resolve this issue, and to find if the problem come from sourcemap, sass or autoprefixer (or something else)

@floridoo

This comment has been minimized.

Show comment
Hide comment
@floridoo

floridoo Nov 8, 2014

Member

Can you upload your test project somewhere, so I can try to debug? Thanks

Member

floridoo commented Nov 8, 2014

Can you upload your test project somewhere, so I can try to debug? Thanks

@floridoo floridoo added the question label Nov 8, 2014

@thaiat

This comment has been minimized.

Show comment
Hide comment

thaiat commented Nov 9, 2014

#57

@ByScripts

This comment has been minimized.

Show comment
Hide comment
@ByScripts

ByScripts Nov 9, 2014

Don't know if it's related. In my sample I don't import any other scss files, and I don't get any error.

Here is a sample project: https://github.com/ByScripts/gulp-sample

Just running npm install then gulp should do the work.

Hope this helps.

ByScripts commented Nov 9, 2014

Don't know if it's related. In my sample I don't import any other scss files, and I don't get any error.

Here is a sample project: https://github.com/ByScripts/gulp-sample

Just running npm install then gulp should do the work.

Hope this helps.

@crocket

This comment has been minimized.

Show comment
Hide comment
@crocket

crocket commented Nov 17, 2014

@floridoo You can reproduce the issue by cloning https://github.com/crocket/gulp-sourcemaps-example.

@heikki

This comment has been minimized.

Show comment
Hide comment
@heikki

heikki Nov 17, 2014

@ByScripts sourcesContent seems to work in your example if you update gulp-autoprefixer to 2.0.0.

heikki commented Nov 17, 2014

@ByScripts sourcesContent seems to work in your example if you update gulp-autoprefixer to 2.0.0.

@heikki

This comment has been minimized.

Show comment
Hide comment
@heikki

heikki Nov 17, 2014

@crocket You're using gulp-ruby-sass in your example. I get an error when running it. Which sass version do you have?

heikki commented Nov 17, 2014

@crocket You're using gulp-ruby-sass in your example. I get an error when running it. Which sass version do you have?

@crocket

This comment has been minimized.

Show comment
Hide comment
@crocket

crocket Nov 17, 2014

@heikki I think the sass version is 3.4.8, and I suspect changes in gulp-ruby-sass broke gulp-sourcemaps. You should debug https://github.com/crocket/gulp-sourcemaps-example to confirm my suspicion.

crocket commented Nov 17, 2014

@heikki I think the sass version is 3.4.8, and I suspect changes in gulp-ruby-sass broke gulp-sourcemaps. You should debug https://github.com/crocket/gulp-sourcemaps-example to confirm my suspicion.

@heikki

This comment has been minimized.

Show comment
Hide comment
@heikki

heikki Nov 17, 2014

@crocket Your example is broken. :)

heikki commented Nov 17, 2014

@crocket Your example is broken. :)

@crocket

This comment has been minimized.

Show comment
Hide comment
@crocket

crocket Nov 17, 2014

@heikki How can I fix my example?

crocket commented Nov 17, 2014

@heikki How can I fix my example?

@heikki

This comment has been minimized.

Show comment
Hide comment
@heikki

heikki Nov 17, 2014

@crocket That question is more suitable to StackOverflow :)
Your example doesn't help reproducing this issue with sourcemaps because it doesn't work at all.

heikki commented Nov 17, 2014

@crocket That question is more suitable to StackOverflow :)
Your example doesn't help reproducing this issue with sourcemaps because it doesn't work at all.

@crocket

This comment has been minimized.

Show comment
Hide comment
@crocket

crocket Nov 18, 2014

@heikki I updated https://github.com/crocket/gulp-sourcemaps-example so that it now uses Vagrant to set up its own environment in a new VM. Go check it up. It works.

Update 1. It seems gulp-ruby-sass is not meant to be compatible with gulp-sourcemaps and gulp-autoprefixer. Forget about my repository!

crocket commented Nov 18, 2014

@heikki I updated https://github.com/crocket/gulp-sourcemaps-example so that it now uses Vagrant to set up its own environment in a new VM. Go check it up. It works.

Update 1. It seems gulp-ruby-sass is not meant to be compatible with gulp-sourcemaps and gulp-autoprefixer. Forget about my repository!

@crocket

This comment has been minimized.

Show comment
Hide comment
@crocket

crocket Nov 18, 2014

Update. I successfully replicated the issue in a minimal test case at https://github.com/crocket/gulp-sourcemaps-example

crocket commented Nov 18, 2014

Update. I successfully replicated the issue in a minimal test case at https://github.com/crocket/gulp-sourcemaps-example

@stevemao

This comment has been minimized.

Show comment
Hide comment
@stevemao

stevemao Nov 20, 2014

I'm trying to add sourcemap feature to web-starter-kit (google/web-starter-kit#546) and I can't generate correct result either.

// Compile and Automatically Prefix Stylesheets
gulp.task('styles', function () {
  // For best performance, don't add Sass partials to `gulp.src`
  return gulp.src([
    'app/styles/*.scss',
    'app/styles/**/*.css'
  ])
    .pipe($.sourcemaps.init())
    .pipe($.changed('styles', {extension: '.scss'}))
    .pipe($.sass({
      precision: 10
    }))
    .on('error', console.error.bind(console))
    .pipe($.autoprefixer({browsers: AUTOPREFIXER_BROWSERS}))
    .pipe($.sourcemaps.write())
    .pipe(gulp.dest('.tmp/styles'))
    // Concatenate And Minify Styles
    .pipe($.if('*.css', $.csso()))
    .pipe(gulp.dest('dist/styles'))
    .pipe($.size({title: 'styles'}));
});

Would you like to have a look at this please? Thanks

stevemao commented Nov 20, 2014

I'm trying to add sourcemap feature to web-starter-kit (google/web-starter-kit#546) and I can't generate correct result either.

// Compile and Automatically Prefix Stylesheets
gulp.task('styles', function () {
  // For best performance, don't add Sass partials to `gulp.src`
  return gulp.src([
    'app/styles/*.scss',
    'app/styles/**/*.css'
  ])
    .pipe($.sourcemaps.init())
    .pipe($.changed('styles', {extension: '.scss'}))
    .pipe($.sass({
      precision: 10
    }))
    .on('error', console.error.bind(console))
    .pipe($.autoprefixer({browsers: AUTOPREFIXER_BROWSERS}))
    .pipe($.sourcemaps.write())
    .pipe(gulp.dest('.tmp/styles'))
    // Concatenate And Minify Styles
    .pipe($.if('*.css', $.csso()))
    .pipe(gulp.dest('dist/styles'))
    .pipe($.size({title: 'styles'}));
});

Would you like to have a look at this please? Thanks

@fingermark

This comment has been minimized.

Show comment
Hide comment
@fingermark

fingermark Nov 30, 2014

Anyone working on this?

fingermark commented Nov 30, 2014

Anyone working on this?

bfanger added a commit to noprotocol/gulp-noprotocol that referenced this issue Dec 2, 2014

@BowlingX

This comment has been minimized.

Show comment
Hide comment
@BowlingX

BowlingX Dec 18, 2014

Have some more problems here, the trick with sourceMaps.loadMaps works, but source maps are not generated when having a more complicated setup like:

Via bower:

Project-A (base.scss') -> references e.g.bower_components/bootstrap-sass-official/assets/stylesheets/bootstrapAnd Project B references Project A (viabower_components/project-a/sass/base`)

Source maps stop working then, it only works when Project-A does not reference anything in bower_components

BowlingX commented Dec 18, 2014

Have some more problems here, the trick with sourceMaps.loadMaps works, but source maps are not generated when having a more complicated setup like:

Via bower:

Project-A (base.scss') -> references e.g.bower_components/bootstrap-sass-official/assets/stylesheets/bootstrapAnd Project B references Project A (viabower_components/project-a/sass/base`)

Source maps stop working then, it only works when Project-A does not reference anything in bower_components

@polarathene

This comment has been minimized.

Show comment
Hide comment
@polarathene

polarathene Jan 12, 2015

I'm not sure if I'm having the same problem. I've been looking into this for about 2 days now. I think gulp-autoprefixer is making a correct sourcemap between it's input/output css files. gulp-sourcemaps and gulp-sass don't seem to be the issue either. I've tried compiling my scss file with node-sass and it's sourcemap feature, it seems to output a broken sourcemap regardless of settings.

I've come across an excellent visualizer tool. It would seem that the mappings for the scss file are correct but the output css file is incorrect, everything maps to 0. So the issue is likely node-sass or libsass?

You can see the scss/css I've been using to learn the gulp-sass/autoprefixer workflow with sourcemaps in the visualizer tool here . Note the bottom content identifying the mappings, each mapping starts with 0->, and as you can see in the css content on the right, it's highlighting the first line only. Am I the only one getting a result like this? (autoprefixer aside).

polarathene commented Jan 12, 2015

I'm not sure if I'm having the same problem. I've been looking into this for about 2 days now. I think gulp-autoprefixer is making a correct sourcemap between it's input/output css files. gulp-sourcemaps and gulp-sass don't seem to be the issue either. I've tried compiling my scss file with node-sass and it's sourcemap feature, it seems to output a broken sourcemap regardless of settings.

I've come across an excellent visualizer tool. It would seem that the mappings for the scss file are correct but the output css file is incorrect, everything maps to 0. So the issue is likely node-sass or libsass?

You can see the scss/css I've been using to learn the gulp-sass/autoprefixer workflow with sourcemaps in the visualizer tool here . Note the bottom content identifying the mappings, each mapping starts with 0->, and as you can see in the css content on the right, it's highlighting the first line only. Am I the only one getting a result like this? (autoprefixer aside).

@polarathene

This comment has been minimized.

Show comment
Hide comment
@polarathene

polarathene Jan 12, 2015

I've looked further into this and am pretty sure the issue is related to libsass or node-sass with how they're producing a sourcemap. I've manually corrected the scss-css sourcemap mappings, then used gulp-autoprefixer, mappings appear to be working and chrome/firefox dev tools are reporting the correct lines to the scss. You can see the scss/autoprefixer sourcemap here

Raised an issue on node-sass here, and just been notified it's an issue with libsass which should be solved with libsass 3.2.

polarathene commented Jan 12, 2015

I've looked further into this and am pretty sure the issue is related to libsass or node-sass with how they're producing a sourcemap. I've manually corrected the scss-css sourcemap mappings, then used gulp-autoprefixer, mappings appear to be working and chrome/firefox dev tools are reporting the correct lines to the scss. You can see the scss/autoprefixer sourcemap here

Raised an issue on node-sass here, and just been notified it's an issue with libsass which should be solved with libsass 3.2.

@DallanQ

This comment has been minimized.

Show comment
Hide comment
@DallanQ

DallanQ Jan 13, 2015

Thank-you @ByScripts, your solution worked great for me! (I'm using gulp-sass)

DallanQ commented Jan 13, 2015

Thank-you @ByScripts, your solution worked great for me! (I'm using gulp-sass)

@polarathene

This comment has been minimized.

Show comment
Hide comment
@polarathene

polarathene Jan 15, 2015

@ByScripts gulp-sass was updated recently, mappings aren't broken like before. If you're using gulp-ruby-sass you should be fine with the alpha release if using external sources, embedded don't seem to work. The only other issue with gulp-ruby-sass that prevents me using it is the file paths placed in sources of the sourcemap, I think this is only an issue with windows from what I've read.

I have code examples for both here

polarathene commented Jan 15, 2015

@ByScripts gulp-sass was updated recently, mappings aren't broken like before. If you're using gulp-ruby-sass you should be fine with the alpha release if using external sources, embedded don't seem to work. The only other issue with gulp-ruby-sass that prevents me using it is the file paths placed in sources of the sourcemap, I think this is only an issue with windows from what I've read.

I have code examples for both here

@swieder227

This comment has been minimized.

Show comment
Hide comment
@swieder227

swieder227 Feb 9, 2015

npm update gulp-sass fixed the problem for me. Now working with gulp-sass, gulp-autoprefixer, and gulp-sourcemaps.

gulp.task('styles', function() {
  return gulp.src('scss/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({ style: 'expanded' }))
    .pipe(autoprefixer('last 2 version'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('css'))
    .pipe(rename({suffix: '.min'}))
    .pipe(minifycss())
    .pipe(gulp.dest('css'))
    .pipe(connect.reload())
    .pipe(notify({ message: 'Styles task complete' }));
});

swieder227 commented Feb 9, 2015

npm update gulp-sass fixed the problem for me. Now working with gulp-sass, gulp-autoprefixer, and gulp-sourcemaps.

gulp.task('styles', function() {
  return gulp.src('scss/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({ style: 'expanded' }))
    .pipe(autoprefixer('last 2 version'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('css'))
    .pipe(rename({suffix: '.min'}))
    .pipe(minifycss())
    .pipe(gulp.dest('css'))
    .pipe(connect.reload())
    .pipe(notify({ message: 'Styles task complete' }));
});
@heikki

This comment has been minimized.

Show comment
Hide comment
@heikki

heikki Feb 18, 2015

I think this can be closed. @ByScripts's sample tasks work identically with latest module versions.

heikki commented Feb 18, 2015

I think this can be closed. @ByScripts's sample tasks work identically with latest module versions.

@stevemao

This comment has been minimized.

Show comment
Hide comment
@stevemao

stevemao Feb 18, 2015

I don't think having .pipe(sourcemaps.write({includeContent: false})) .pipe(sourcemaps.init({loadMaps: true})) in between sass and autoprefixer is elegant.

stevemao commented Feb 18, 2015

I don't think having .pipe(sourcemaps.write({includeContent: false})) .pipe(sourcemaps.init({loadMaps: true})) in between sass and autoprefixer is elegant.

@heikki

This comment has been minimized.

Show comment
Hide comment
@heikki

heikki Feb 18, 2015

@stevemao Then remove them 😄 Both tasks work now.

heikki commented Feb 18, 2015

@stevemao Then remove them 😄 Both tasks work now.

@stevemao

This comment has been minimized.

Show comment
Hide comment
@stevemao

stevemao Feb 18, 2015

Thanks @heikki , for the reference web-starter-kit is already using this.

google/web-starter-kit@8c356e1

stevemao commented Feb 18, 2015

Thanks @heikki , for the reference web-starter-kit is already using this.

google/web-starter-kit@8c356e1

@HectorLS

This comment has been minimized.

Show comment
Hide comment
@HectorLS

HectorLS May 19, 2016

Hi, i was reading that the new version fixed the problem, but i installed today
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.0",
"gulp-sass": "^2.3.1",
"gulp-sourcemaps": "^1.6.0",

And doesn't work if i do:

gulp.task('sass', () => {
  log('Compiling SCSS files...');
  return gulp
    .src('./src/app/**.*scss')
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({ browser: ['last 2 version', '> 5%'] }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./.temp/'));
});

But if i added the @ByScripts two MAGIC LINES works

// THIS WORKS
gulp.task('sass', () => {
  log('Compiling SCSS files...');
  return gulp
    .src('./src/app/**.*scss')
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(sourcemaps.write({includeContent: false}))
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(autoprefixer({ browser: ['last 2 version', '> 5%'] }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./.temp/'));
});

When this would be fixed to don't need that two lines... is like zero readable... :S

HectorLS commented May 19, 2016

Hi, i was reading that the new version fixed the problem, but i installed today
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.0",
"gulp-sass": "^2.3.1",
"gulp-sourcemaps": "^1.6.0",

And doesn't work if i do:

gulp.task('sass', () => {
  log('Compiling SCSS files...');
  return gulp
    .src('./src/app/**.*scss')
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({ browser: ['last 2 version', '> 5%'] }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./.temp/'));
});

But if i added the @ByScripts two MAGIC LINES works

// THIS WORKS
gulp.task('sass', () => {
  log('Compiling SCSS files...');
  return gulp
    .src('./src/app/**.*scss')
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(sourcemaps.write({includeContent: false}))
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(autoprefixer({ browser: ['last 2 version', '> 5%'] }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./.temp/'));
});

When this would be fixed to don't need that two lines... is like zero readable... :S

briantschu added a commit to uwmweb/uwmcms that referenced this issue Dec 8, 2017

UWM-CMS: Fix sourcemaps, remove sass-glob
There is a conflict with gulp-sourcemaps and gulp-sass glob. With a standard implementation of gulp-autoprefixer, sourcemaps aren't generated correctly.

For the autoprefixer to work, I'm using this workaround: gulp-sourcemaps/gulp-sourcemaps#60 (comment)
gulp-sourcemaps plugin compatibility can be found here: https://github.com/gulp-sourcemaps/gulp-sourcemaps/wiki/Plugins-with-gulp-sourcemaps-support
@shamseerahammedm

This comment has been minimized.

Show comment
Hide comment
@shamseerahammedm

shamseerahammedm Mar 23, 2018

was facing the same issue, solutions by @HectorLS solved my prob.

shamseerahammedm commented Mar 23, 2018

was facing the same issue, solutions by @HectorLS solved my prob.

@sizzlorr

This comment has been minimized.

Show comment
Hide comment
@sizzlorr

sizzlorr Jul 20, 2018

@HectorLS solution helped me too, but here
.pipe(autoprefixer({ browser: ['last 2 version', '> 5%'] }))
must be browserS

sizzlorr commented Jul 20, 2018

@HectorLS solution helped me too, but here
.pipe(autoprefixer({ browser: ['last 2 version', '> 5%'] }))
must be browserS

@manorossa

This comment has been minimized.

Show comment
Hide comment
@manorossa

manorossa Aug 16, 2018

I had the same problem (autoprefixer not working), and the solution by @HectorLS didn't work for me. But what did work, was commenting out my lines implementing sourcemaps; then running my gulp task (which then allowed autoprefixer to work).
After that I was able to reinstate my sourcemaps config and they both worked nicely together.
Hope that might help someone.

manorossa commented Aug 16, 2018

I had the same problem (autoprefixer not working), and the solution by @HectorLS didn't work for me. But what did work, was commenting out my lines implementing sourcemaps; then running my gulp task (which then allowed autoprefixer to work).
After that I was able to reinstate my sourcemaps config and they both worked nicely together.
Hope that might help someone.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment