How to use in combination with gulp-sass #8
Comments
|
I wonder if this is connected to dlmanning/gulp-sass#92. I was getting the same kind of error message from gulp-sass. |
|
It is the same issue when used in combination with plus3network/gulp-less. |
|
+1 |
|
This conversation shouldn't be here and I should close it... but since sourcemaps are being the source —no pun intended— of many headaches, I think this could remain open for a while. What do you think @sindresorhus? |
|
@battaglr It seems that autoprefixer is stripping out the sourcemaps so I figured this was the right place. Where should the bug be posted? |
|
@valdelama: this one is not a bug of |
|
I've had all the various sourcemap problems reported when trying to use gulp-sass, gulp-sourcemap and gulp-autoprefixer. After fiddling around for ages this is the final task template that works for me: The things that made it work for me are wrapping Because the source maps don't include the original content I'm allowing my dev server access to the original .scss files too, so that from the Chrome dev console I can click on the scss file name and view the original source directly. The dev console actually feels a little snappier this way too with large stylesheets. The line numbering to the original file is slightly out due to autoprefixer adding the additional prefixed lines, but the important thing is that very quickly and with low friction I can find the style settings in the original .scss file. |
|
Has there been any progress on this? I am experiencing exactly the same issue. var gulp = require('gulp'),
sass = require('gulp-sass'),
rename = require('gulp-rename'),
sourcemaps = require('gulp-sourcemaps'),
autoprefixer = require('gulp-autoprefixer');
gulp.task('styles', function() {
return gulp.src('app/index.scss')
// Initialise sourcemaps prior to compiling SASS.
.pipe(sourcemaps.init())
// Compile SASS.
.pipe(sass({outputStyle: 'compressed'}))
// Rename index.scss file to styles.css.
.pipe(rename({basename: 'styles'}))
// Write sourcemap inline.
.pipe(sourcemaps.write())
// Reinitialise sourcemaps, loading inline sourcemap.
.pipe(sourcemaps.init({loadMaps: true}))
// Run compiled CSS through autoprefixer.
.pipe(autoprefixer({browsers: ['last 2 versions']}))
// Write sourcemap to a separate file.
.pipe(sourcemaps.write('./'))
// Write CSS file to desitination path.
.pipe(gulp.dest('static/css/'));
});It's also worth noting that I have a app/index.scss// COMPONENT IMPORTS
@import '../components/component-one/index.scss';
@import '../components/component-two/index.scss';
// APP IMPORTS
@import 'layout.scss';
@import 'tablet.scss';
@import 'mobile.scss';Without the If I remove the I assumed this was coming from the rename step I was doing, so I updated the task to output @sindresorhus as an author on both Many thanks for everyone's work on these plugins, they are truly awesome! |
|
This appears to work for me, using gulp-sass, gulp-sourcemaps, gulp-autoprefixer, gulp-minify-css and gulp-csscomb: gulp.task('styles', function() {
return gulp.src('src/styles/**/*.scss')
.pipe($.plumber())
.pipe($.if(!RELEASE, $.sourcemaps.init()))
.pipe($.sass({
errLogToConsole: true
}))
.pipe($.if(!RELEASE, $.sourcemaps.write({
includeContent: false,
sourceRoot: '.'
})))
.pipe($.if(!RELEASE, $.sourcemaps.init({loadMaps: true})))
.pipe($.autoprefixer({browsers: AUTOPREFIXER_BROWSERS}))
.pipe($.csscomb())
.pipe($.if(RELEASE, $.minifyCss()))
.pipe($.if(!RELEASE, $.sourcemaps.write({
includeContent: false,
sourceRoot: '.'
})))
.pipe(gulp.dest(DEST + '/css'))
.pipe($.size({title: 'styles'}));
}); |
|
@jedmao I've seen a few implementations using Does anyone have a solution that does not use |
|
I would love to see a similar example. |
|
@sindresorhus is it possible to use use gulp-sass in combination with gulp-autoprefixer and external sourcemaps via gulp-sourcemaps? Or is the above solution with inline sourcemaps the only option now? |
|
👍 same problem here |
|
i'm also interested in a solution using gulp-sass in combination with gulp-autoprefixer and external sourcemaps via gulp-sourcemaps, cheers for everyone's great work. EDIT: this mostly works (somehow line numbers are off by a few lines), had to also downgrade gulp-sass to 1.1.0. gulp.src(sassSrc)
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(sass(
includePaths: sassIncludes
))
.pipe(sourcemaps.write(includeContent: false))
.pipe(sourcemaps.init(loadMaps: true))
.pipe(autoprefix(
browsers: ['> 1%', 'last 2 versions']
))
.pipe(sourcemaps.write('../maps'))
.pipe(gulp.dest('build/styles')) |
|
+1 this is sad that this is still such a wide-spread issue for something seeming so trivial. Also, disheartening that it probably forces many users to use ruby-sass. I couldn't get any of the above examples to work for external source maps. Only way I could do it which was to run two sync tasks and inject the sourcemap comment that autoprefixer strips out: gulp.task('sass', function () {
var stream = gulp.src(config.src)
.pipe(sourcemaps.init())
.pipe(sass({
errLogToConsole: true
}))
.pipe(sourcemaps.write('./', {
sourceRoot: '../../src'
}))
.on('error', handleErrors)
.pipe(gulp.dest(config.dest));
return stream;
});
gulp.task('autoprefix', ['sass'], function () {
return gulp.src(config.dest + '/*.css')
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: true
}))
.pipe(insert.append('\n\n/*# sourceMappingURL=app.css.map */'))
.on('error', handleErrors)
.pipe(gulp.dest(config.dest));
}); |
|
+1 autoprefixer also rewirte the css files, so we can not found sass sourcemap in css files, It's not awesome.Can we found a way to solve this ? |
|
Same problem. Having to write and load sourcemaps before they pipe through plugin. Some of the sourcemap files are showing in chrome inspector, some point to the generated .css files. |
|
@sindresorhus Having this issue too - any plans to tackle this? |
|
Also having this issue. |
|
I come back once again , is there have any beautiful way to deal with? |
|
Inline/external sourcemaps work fine, I've come across blog posts and the like saying the issue is with autoprefixer but have been looking into the issue and discovered libsass isn't outputting proper sourcemaps. If you're using libsass check that the sourcemap it produces is functional, in my experience it links to the scss file but fails to match lines. I found out why and you can see here. The good news is it should be fixed with libsass 3.2 :) @myqianlan There are lot of options, you can write separate files using two destinations or tasks, or change name with Autoprefixer works, and handles sourcemap properly. Problem is libsass is making invalid sourcemap, all the mappings from the css to scss are at the beginning of the file, autoprefixer is not at fault. Until libsass 3.2 (and node-sass/gulp-sass work with it), you will not get valid sourcemap for your scss files. |
|
@polarathene thanks,I will take a try. |
|
@myqianlan There was an update to Hope it helps the rest of you too :) |
|
Still love to get a solution for this. Weird thing is that it is working fine for one of my files (we have an admin & public css); when I compile something, in one of the views (public), everything works fine; but for the other (admin), google developers tools cant even show the file that create the style (the file that you see on the style tab when inspecting, right to the classes name). This is getting very weird... If I disable then autoprefixer, everything works fine. Anybody ? |
|
I was having this same issue today, but got it to work correctly by moving the Autoprefixer .pipe rule below the sourcemaps.write. I've tested that it works in Chrome and Firefox latest, using the "Show Original Sources" checkbox from the Settings menu. gulp.task('sass', function() {
gulp.src('app/styles/sass/*.scss')
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(sourcemaps.write())
.pipe(autoprefixer({browsers: ['last 2 versions']}))
.pipe(gulp.dest('app/styles/css'));
}); |
|
Im going to try that, but I suspect that will skew your line numbers in the css inspector because autoprefixer will add lines to the code, changing the location your source map originally haves. |
|
I'm not having the same luck with @superbiche's solution...
autoprefixer = require('gulp-autoprefixer')
sass = require('gulp-sass')
sourcemaps = require('gulp-sourcemaps')
plumber = require('gulp-plumber')
gulpFilter = require('gulp-filter')
config = require('./config')
gulp.task('styles', ['clean-styles'], ->
# Prevent reading sourcemaps to autoprefix them or make sourcemaps of sourcemaps
filter = gulpFilter(['*.css', '!*.map'])
return gulp.src("#{config.STYLE_PATH}/main.scss")
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(sass({ errLogToConsole: true }))
.pipe(sourcemaps.write('./'))
.pipe(filter)
.pipe(autoprefixer({ browsers: ['last 2 versions' ], cascade: true }))
.pipe(filter.restore())
.pipe(gulp.dest(config.STYLE_PATH_DIST))
)
|
|
Thank you, @superbiche. Your solution worked. gulp.src(…)
.pipe($.sourcemaps.init())
.pipe($.sass({
precision: 10,
errLogToConsole: true,
// indentedSyntax: true, → Sass Syntax
outputStyle: 'nested'
}))
.pipe($.sourcemaps.write('.'))
.pipe($.if(['*.css', '!*.map'], $.autoprefixer()))
.pipe(gulp.dest(…));Packages: ├── gulp@3.8.11
├── gulp-autoprefixer@2.1.0
├── gulp-if@1.2.5
├── gulp-sass@1.3.3
├── gulp-sourcemaps@1.5.2 |
|
@jmagnusson Is it possible your Gulpfile is not working because you're running a Ruby-style string interpolation on the return line? You might try this:
and see if that resolves the error. |
|
@dmnplb I like your solution to use the $.if statement for Autoprefixer. |
|
@1Copenut I don't believe so. It's just CoffeeScript which is transformed into that very string you wrote. |
|
@sindresorhus Why was this closed? |
|
It's not an issue with this plugin, but rather gulp-sass (or rather libsass). I've gotten reports that it should be resolved in the unreleased gulp-sass 2.0: https://github.com/dlmanning/gulp-sass/tree/2.x |
|
@sindresorhus Thanks for the info. Do we have any gulp-sass issues touching this? |
|
@1Copenut 's solution worked for me in Chrome using: |
|
This works for me for now, same versions as @pjlong |
|
Turns out the gulp.if solution doesn't work at all. It just skips autoprefixer task. Noticed that only now when tried to CSS animations in Chrome 42 ( which still requires -webkit- ). Now what ? |
|
@justnorris. Looks like @ahdinosaur's solution was working all along. You will have to upgrade to gulp-sass 2.x branch, however: Here's the bare-bones implementation: Note: this is only for inline maps, I don't think I've successfully got external maps to work. |
|
From my side while debugging I saw that the sourcemap was overwritten because of the source file name different (for my case, first app.scss and then app.css) I still don't know how/where to fix it |
|
I would arrive to this solution: gulp-sourcemaps/vinyl-sourcemaps-apply@master...clempat:master Is that making sense to you ? |
|
Still doesn't work for me: Now I can't compile, I get: With this config: |
|
is the comma after |
|
Nope :) |
|
Are u sure it is connected to autoprefixer ? does pipe sass works alone ? Did u checked there: dlmanning/gulp-sass#55 |
|
gulp-sass isn't just ready for production yet. I ended up using gulp-ruby-sass with these settings: Works purrfectly. |
|
@dmnplb Thanks, your solution works perfectly for me too: https://github.com/dsebastien/midnightLightV2/blob/master/gulp/tasks/styles.js |
autoprefixerでエラーが発生したため、sourcemapsの順番と設定を変更 [How to use in combination with gulp-sass](https://github.com/sindresorhus/gulp-autoprefixer/issues/8)を参考に
autoprefixerでエラーが発生したため、sourcemapsの順番と設定を変更 sindresorhus/gulp-autoprefixer#8 を参考にした
|
You just need to execute autoprefixer before sourcemap. |
|
this works for me: see here: https://www.npmjs.com/package/gulp-autoprefixer#source-maps |
Hi,
Im trying to use gulp-autoprefixer in combination with gulp-sass and gulp-sourcemaps.
My gulpfile task looks like this:
The
plugins.prefix is related togulp-load-pluginsWithout gulp-sass the task runs fine, but with it it throws the following error:
Should I be running autoprefixer as a separate task after CSS compilation?
Thanks.
The text was updated successfully, but these errors were encountered: