CSS - Source Map

1 - About

For each CSS file it produces, a CSS preprocessor generates:

  • a source map file (.map)
  • and the compiled CSS.

The source map file is a JSON file that defines a mapping between:

  • each (compiled|generated) CSS declaration
  • and the corresponding line of the source file.

It allow then to map the (compiled|generated) CSS back to the original pre-processor source file.

Source map files are also generated for javascript. See Javascript source file

3 - Syntax

Each CSS file contains an annotation that specifies the (URL|location) of its source map file, embedded in a special comment on the last line of the file:

/*# sourceMappingURL=<url> */

4 - Example

For instance, Sass generates:

  • from the following Sass source file (styles.scss)

$textSize: 26px;
$fontColor: red;
$bgColor: whitesmoke;
h2 {
    font-size: $textSize;
    color: $fontColor;
    background: $bgColor;

  • a CSS file (styles.css) that contains the sourceMappingURL annotation

h2 {
  font-size: 26px;
  color: red;
  background-color: whitesmoke;
/*# sourceMappingURL=styles.css.map */

  • and the source map file (styles.css.map)

  "version": "3",
  "sources": ["sass/styles.scss"],
  "file": "styles.css"

where the mappings values are encoded in VLQ (Variable Length Quantity)

5 - Management

5.1 - Enable in Browser

In browser, you can enable them in order to debug via their setting. If they are enable, the browser will try to get them by sending a http request

Example in chrome

6 - Support

6.1 - DevTools failed to load SourceMap

If you get this kind of warning in a browser, this is because you have enabled it in the browser and the source map file was not found on the server.

DevTools failed to load SourceMap: Could not load content for http://example.com/css/bootstrap.min.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

Data Science
Data Analysis
Data Science
Linear Algebra Mathematics

Powered by ComboStrap