For each CSS file it produces, a CSS preprocessor generates:
The source map file is a JSON file that defines a mapping between:
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
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> */
For instance, Sass generates:
$textSize: 26px;
$fontColor: red;
$bgColor: whitesmoke;
h2 {
font-size: $textSize;
color: $fontColor;
background: $bgColor;
}
h2 {
font-size: 26px;
color: red;
background-color: whitesmoke;
}
/*# sourceMappingURL=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)
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
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