CSS - Source Map

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

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> */

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",
  "mappings":"AAKA,EAAG;EACC,SAAS,EANF,IAAI;EAOX,KAAK"
  "sources": ["sass/styles.scss"],
  "file": "styles.css"
}

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

Management

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

Chrome Enable Source Map

Support

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





Discover More
CSS - Preprocessor

A preprocessor takes an arbitrary source file and converts it into something that the browser understands. Preprocessors implements features that browser doesn't support natively such as: variables...
HTTP - Accept header

accept is a request header that specify the mimes type of the response body that are accepted by the client (ie browser) If no Accept header field is present, then it is assumed that the client accepts...
Vscode Source Map Pb
Javascript - Source Map (Map File)

A source map provides a mapping between the original and the build source code. The bundler that combined/minified the source code creates the source map debug session The location coordinates are by...
Web - Build Operations / Build Pipeline

This page is the build operation for the web. A build pipeline will: transform (compile) bundle and optimize web code html, css (less, ...) Javascript (Javascript Module, React Jsx,...



Share this page:
Follow us:
Task Runner