10

I had added style.css.map to my .gitignore file thinking that this was some kind of internal file that was not needed for public consumption.

Now I'm seeing that when Chrome (not Firefox) loads my page, it is looking for style.css.map and returning a 404. I'm not explicitly asking it to load that file, but it seems to be getting called automatically.

  1. Why is Chrome looking for that file?
  2. Should I have included the .map file to the repo?

For further context, this is a Wordpress site and I am including the style.scss file in the repo.

1 Answer 1

9
  1. Using sourcemaps you can live edit the scss using the devtools.

For each generated CSS file, Sass is generating a source map file (.map file) in addition to the compiled CSS. Each CSS file contains an annotation that specifies the URL of its source map file, embedded in a special comment on the last line of the file:

/*# sourceMappingURL= */

More info about sourcemaps: https://developer.chrome.com/devtools/docs/css-preprocessors

  1. If you want to use sourcemaps on prod, you must have the .map file, if you don't need it, just disable its generation. If you are using grunt to run Sass, check your config.rb file and look for the sass_options entry, you might find ":sourcemap => true", if you find it, set it to false. Beware that sourcemaps are default on Sass 3.4.
2
  • 1
    Ah, so it sounds as though pretty much the only purpose of the source map is for browser debugging. That's what I'm getting from your answer and the link you pasted. Is that your understanding as well?
    – JakeParis
    Apr 29, 2015 at 14:56
  • Yeah, it has no effect on the page itself. Rather than seeing the css as a source on dev tools, you see the scss. Apr 29, 2015 at 16:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.