gulp-compass
gulp-compass copied to clipboard
Source map comment not being added to CSS file
I'm using version 2.0.4 and the issue I'm seeing is that the comment with the path to the source map isn't being added to the generated CSS file. For example:
/*# sourceMappingURL=main.css.map */
That bit isn't being added to the CSS file and so when I'm in DevTools, I don't see the mapping. When I add that bit manually, all is well. Any ideas what might be happening here?
I came across the same problem but it seems to be gulp-autoprefixer removing the comments.
You can either remove autoprefixer for the development build or get gulp-sourcemaps to create the sourcemaps rather than compass:
gulpfile.js:
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var compass = require('gulp-compass');
gulp.task('css:dev', function(){
gulp.src('./scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(compass({
config_file: './config.rb',
environment: 'development',
sass: 'scss',
css: 'css'
}))
.pipe(sourcemaps.write({includeContent: false}))
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(autoprefixer({browsers: ['last 2 versions']}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('css'));
});
I got the above fix from here.
@markhorgan Thanks for the tip!