Sass: How to Remove /*# Sourcemappingurl Comment

Sourcemap to original SCSS file

As i can see on your sass-loader configuration, you're already getting the source maps for yous scss files (to verify that you need to have a file with the same name as you css, but with a .map on its name), so the only thing you will need is to peroperly configure your browser to load and use the source maps. This example uses Google Chrome:

1. Open dev tools
2. Click the gear icon or three dots to open settings (top right corner)
3. Under General (or Preferences), look for the “Sources” section. In that section, select “Enable CSS source maps”.
4. Make sure the accompanying “Auto-reload generated CSS” is also enabled (if available). This last step helps to reload the CSS when it changes. Think of it like a live reload feature for the CSS alone.
5. Navigate to your localhost server, inspect any element on your page.
6. In the developer tools, choose the Sources tab.
7. In the file tree on the left hand side, right-click your stylesheet and select “Map to file system resource…”. This will bring up the file search dialog. Select the appropriate file (your stylesheet). In some newer versions of Chrome, the file should be loaded automatically using the /*# sourceMappingURL=style.css.map */ reference
8. Restart the developer tools.

That should work. Let me know. Otherwise i will fine tune the quick tutorial.

CSS Sourcemaps not generating properly with gulp, SASS, & autoprefixer

You can use gulp-sourcemaps if you switch to gulp-sass. Both gulp-sass and gulp-autoprefixer support gulp sourcemaps.

Implementation would look something like:

var gulp = require('gulp');
var gulpSass = require('gulp-sass');
var gulpAutoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('javascript', function() {
  gulp.src('src/**/*.scss')
  .pipe(sourcemaps.init())
  .pipe(gulpSass())
  .pipe(gulpAutoprefixer())
  .pipe(sourcemaps.write('../maps'))
  .pipe(gulp.dest('dist'));
});

Which would write .map files in a maps directory.

Note: All manipulations from source .scss to target .css must be in the stream between sourcemaps.init() and sourcemaps.write(). This includes any minification such as gulp-uglify, which also supports gulp-sourcemaps.

Chrome not loading CSS source maps?

You can try the following steps:

1- delete the map file and regenerate it again.

2- Using the chrome inspector, go to Settings > General and then click on the button "Restore defaults and reload"

SASS sourcemaps not working in Google Chrome

It turns out that auto-prefixer was running on the compiled CSS and stripping out the sourceMapURL comment, which now makes sense that it would do that, because unless you have auto-prefixer source maps turned on (which I did not), it would make the source maps untrue. A cool thing I learned form this, is that auto-prefixer is apparently able to use Sass source maps to make it's own, and keep everything true to the Sass files.

I actually wish there was a warning whenever auto-prefixer finds source maps, but doesn't have source maps enabled itself, because it's obvious that tasks shouldn't generate sourcemaps that wont be used.

I would have been more likely get an answer sooner if I would have posted my whole Gruntfile, but it's a lot of stuff, and I was trying scale back to code I thought was relevant. Darn.

---

Related Topics