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.

score 498 · Accepted Answer · edited Jun 20 '20 at 09:12

498

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 01 '14 at 22:50

Steve Jansen

9,398
2
29
34

11

This answer explains that they are used in conjunction with CSS preprocessors – something I have not yet explored much. Thanks – wetjosh Feb 01 '14 at 23:00
23

It sounds like these are these analagous to [debug symbols](http://en.wikipedia.org/wiki/Debug_symbol) in a programming language, no? – Chris Simmons Mar 07 '14 at 15:04
1

i was getting js error, so i made a fake file in that directory, to stop the error from showing. – Jun 25 '14 at 11:30
3

@IssaFarax You can disable loading source maps through the ChromeDev tools settings. Open DevTools > Click the settings gear > Uncheck Enable (JavaScript|CSS) source maps – Giles Wells Jun 25 '14 at 18:39
1

you can also ref : http://stackoverflow.com/questions/21766880/bootstrap-3-1-1-what-is-the-map-extension-file-used-for – Vivek Panday May 05 '15 at 13:06
and [here](http://stackoverflow.com/questions/21719562/javascript-map-files-javascript-source-maps) **more detailed explanation for JS and CSS and when , why to use it** – Shaiju T Nov 01 '15 at 09:25
Quick Question: `.map` files should be present or not in the production build ?? – Paras Gupta Aug 31 '21 at 13:13
This only obliquely answers the question. An actual answer would be something like "They are source maps." – Asker Aug 14 '22 at 23:41

score 203 · Answer 2 · answered Jul 18 '14 at 22:56

203

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

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

answered Jul 18 '14 at 22:56

LeonardChallis

7,759
6
45
76

65

Or just the hash `#` and it will turn into a simple comment, in case you want it back later. – givanse Nov 05 '14 at 00:35
1

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. – Curvian Vynes Sep 14 '15 at 21:27
3

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. – Asker Aug 16 '22 at 01:46

score 80 · Answer 3 · answered Feb 01 '14 at 22:45

80

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.

answered Feb 01 '14 at 22:45

davidism

121,510
29
395
339

score 13 · Answer 4 · edited May 17 '20 at 21:00

13

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.

edited May 17 '20 at 21:00

grahamcracker1234

591
1
7
27

answered Jan 07 '19 at 09:36

Shadi Alnamrouti

11,796
4
56
54

1

Should they be treated as text files, or byte streams? Should they end in `\n`? – Aaron Franke May 08 '20 at 01:34
@AaronFranke They are text files. I suggest you copy the content of a .map file and paste it on https://jsonblob.com/ to see the JSON key/value pairs – Shadi Alnamrouti May 09 '20 at 05:31

score 12 · Answer 5 · answered Jul 07 '14 at 03:16

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.

Travis Heeter · Answer 6 · 2017-02-17T14:14:37.140

9

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.

edited Feb 17 '17 at 14:14

answered Oct 24 '16 at 14:42

Travis Heeter

13,002
13
87
129

score 8 · Answer 7 · answered Apr 19 '17 at 15:47

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.

Muhammad Reda · Answer 8 · 2020-07-01T13:56:52.823

8

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.

edited Jul 01 '20 at 13:56

answered Jul 01 '20 at 08:41

Muhammad Reda

26,379
14
93
105

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

8 Answers8

Linked