Skip to content
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 · 31 comments
Closed

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

ByScripts opened this issue Nov 8, 2014 · 31 comments
Labels

Comments

@ByScripts
Copy link

@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
Copy link
Member

@floridoo floridoo commented Nov 8, 2014

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

Loading

@thaiat
Copy link

@thaiat thaiat commented Nov 9, 2014

#57

Loading

@ByScripts
Copy link
Author

@ByScripts 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.

Loading

@crocket
Copy link

@crocket crocket commented Nov 17, 2014

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

Loading

@heikki
Copy link

@heikki heikki commented Nov 17, 2014

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

Loading

@heikki
Copy link

@heikki 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?

Loading

@crocket
Copy link

@crocket 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.

Loading

@heikki
Copy link

@heikki heikki commented Nov 17, 2014

@crocket Your example is broken. :)

Loading

@crocket
Copy link

@crocket crocket commented Nov 17, 2014

@heikki How can I fix my example?

Loading

@heikki
Copy link

@heikki 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.

Loading

@crocket
Copy link

@crocket 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!

Loading

@crocket
Copy link

@crocket crocket commented Nov 18, 2014

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

Loading

@stevemao
Copy link

@stevemao 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

Loading

@fingermark
Copy link

@fingermark fingermark commented Nov 30, 2014

Anyone working on this?

Loading

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

@BowlingX 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/bootstrap And 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

Loading

@polarathene
Copy link

@polarathene 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).

Loading

@polarathene
Copy link

@polarathene 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.

Loading

@DallanQ
Copy link

@DallanQ DallanQ commented Jan 13, 2015

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

Loading

@polarathene
Copy link

@polarathene 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

Loading

@swieder227
Copy link

@swieder227 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' }));
});

Loading

@heikki
Copy link

@heikki heikki commented Feb 18, 2015

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

Loading

@stevemao
Copy link

@stevemao 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.

Loading

@heikki
Copy link

@heikki heikki commented Feb 18, 2015

@stevemao Then remove them 😄 Both tasks work now.

Loading

@stevemao
Copy link

@stevemao stevemao commented Feb 18, 2015

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

google/web-starter-kit@8c356e1

Loading

@HectorLS
Copy link

@HectorLS 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

Loading

@shamseerahammedm
Copy link

@shamseerahammedm shamseerahammedm commented Mar 23, 2018

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

Loading

@sizzlorr
Copy link

@sizzlorr sizzlorr commented Jul 20, 2018

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

Loading

@manorossa
Copy link

@manorossa 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.

Loading

@joffff
Copy link

@joffff joffff commented Aug 31, 2018

@manorossa Could you share an example of your code?

Loading

@ghost
Copy link

@ghost ghost commented Sep 13, 2018

Upgrading to 2.6.4 the problem does not persists anymore.
This is my task
return gulp.src('src/stylesheets/main.scss') .pipe($.sourcemaps.init()) .pipe($.sass({includePaths: PATHS.sass}).on('error', $.sass.logError)) .pipe($.autoprefixer({browsers: COMPATIBILITY})) .pipe($.if(PRODUCTION, $.cleanCss({compatibility: '*'}))) .pipe(postcss(processors)) .pipe($.if(!PRODUCTION, $.sourcemaps.write('.'))) .pipe(gulp.dest(PATHS.dist + '/stylesheets')) .pipe(browser.reload({stream: true})) .pipe(notify({message: 'Css compilato correttamente', onLast: true}));

Loading

@Alecto
Copy link

@Alecto Alecto commented Nov 11, 2018

doesnt work
.pipe($.autoprefixer({ browsers: ['last 5 versions', '> 1%'], cascade: true }))

Loading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet