what are the .map files used for in Bootstrap 3.x?

Question

There are two files included in the CSS folder with .map file extensions. They are:

bootstrap-theme.css.map
bootstrap.css.map

They appear to be minified files but I don't know what they are for.

Compression

Answer 1

From Working with CSS preprocessors in Chrome DevTools:

Many developers generate CSS style sheets using a CSS preprocessor, such as Sass, Less, or Stylus. Because the CSS files are generated, editing the CSS files directly is not as helpful.

For preprocessors that support CSS source maps, DevTools lets you live-edit your preprocessor source files in the Sources panel, and view the results without having to leave DevTools or refresh the page. When you inspect an element whose styles are provided by a generated CSS file, the Elements panel displays a link to the original source file, not the generated .css file.

Lollapalooza

It sounds like these are these analagous to debug symbols in a programming language, no? – Gallinaceous

i was getting js error, so i made a fake file in that directory, to stop the error from showing. – Brewage

@IssaFarax You can disable loading source maps through the ChromeDev tools settings. Open DevTools > Click the settings gear > Uncheck Enable (JavaScript|CSS) source maps – Hard

you can also ref : #21767380 – Edyth

and here more detailed explanation for JS and CSS and when , why to use it – Docila

Quick Question: .map files should be present or not in the production build ?? – Mllly

This only obliquely answers the question. An actual answer would be something like "They are source maps." – Script

Answer 2

If you just want to get rid of the error, you can also delete this line in bootstrap.css:

/*# sourceMappingURL=bootstrap.css.map */

Modern

Or just the hash # and it will turn into a simple comment, in case you want it back later. – Colton

You do not want this for production environment, so compile it accordingly (gulp --production if you use gulp, this will not include that sourceMapping line) and exclude *.map files from your uploads to production server. – Privileged

OP asked "What are the .map files used in Bootstrap 3.x"? This "answer" instead talks about how to get rid of some unspecified error. – Script

Answer 3

These are source maps. Provide these alongside compressed source files; developer tools such as those in Firefox and Chrome will use them to allow debugging as if the code was not compressed.

Braiding

Answer 4

What is a CSS map file?

It is a JSON format file that links the CSS file to its source files, normally, files written in preprocessors (i.e., Less, Sass, Stylus, etc.), this is in order do a live debug to the source files from the web browser.

What is CSS preprocessor? Examples: Sass, Less, Stylus

It is a CSS generator tool that uses programming power to generate CSS robustly and quickly.

Lunatic

Should they be treated as text files, or byte streams? Should they end in \n? – Maibach

@AaronFranke They are text files. I suggest you copy the content of a .map file and paste it on jsonblob.com to see the JSON key/value pairs – Lunatic

Answer 5

The bootstrap css can be generated by Less. The main purpose of map file is used to link the css source code to less source code in the chrome dev tool. As we used to do .If we inspect the element in the chrome dev tool. you can see the source code of css. But if include the map file in the page with bootstrap css file. you can see the less code which apply to the element style you want to inspect.

Hungnam

Answer 6

For anyone who came here looking for these files (Like me), you can usually find them by adding .map to the end of the URL:

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css.map

Be sure to replace the version with whatever version of Bootstrap you're using.

Hahnke

Answer 7

Map files (source maps) are there to de-reference minified code (css and javascript).

And they are mainly used to help developers debugging a production environment, because developers usually use minified files for production which makes it impossible to debug. Map files help them de-referencing the code to see how the original file looked like.

Eskimo

Answer 8

Have you ever found yourself wishing you could keep your client-side code readable and more importantly debuggable even after you've combined and minified it, without impacting performance? Well now you can through the magic of source maps.

This article explains Source Maps using a practical approach.

Matriculate

This link (as of 2024) explains everything in the Universe. – Oletaoletha