204

I'm recently playing with bootsrap3. I compiled it from sources and included distr js and css to my project. The thing is, I see in GH dev tools, that it's trying to get .map.css file. Why does it want to do so? How to disable it? Do I need to disable it? To not to have an error mark in dev tools, I added that map file, after which all styles are displayed as they defined in less files, which doesn't help me much.

dhblah
  • 9,751
  • 12
  • 56
  • 92
  • 5
    Have any of the answers given below answer your question? If not, can you update your question so that we can improve our answers? – Dominic Zukiewicz Jan 03 '15 at 09:13
  • Possible duplicate of [what are the .map files used for in Bootstrap 3.1?](http://stackoverflow.com/questions/21504611/what-are-the-map-files-used-for-in-bootstrap-3-1) – m-smith Dec 23 '16 at 14:24

14 Answers14

257

Delete the line /*# sourceMappingURL=bootstrap.css.map */ from bootstrap.css

Mohit Jain
  • 30,259
  • 8
  • 73
  • 100
user2779632
  • 2,737
  • 1
  • 11
  • 3
  • 59
    Please explain your answer in brief to make your answer more useful for OP and other readers. – Mohit Jain May 28 '14 at 11:29
  • 16
    This works, but if bootstrap is referenced directly from node_modules, when bootstrap is re-installed, this will be overwritten back – Alexander Jan 26 '17 at 05:39
  • 4
    Wow! Absolutely crazy... this only works if you "delete" the line (as you said)... commenting out still produced 404 errors! Glad I stumbled upon your post! – flipflopmedia Oct 31 '17 at 14:14
  • 2
    Worth noting is that if you included the css file with the 'integrity' attribute, just deleting the noted row will simply not load the file: 'Failed to find a valid digest in the 'integrity' attribute... The resource has been blocked.' So you would have to recalculate 'sha' or remove the 'integrity' attribute in order for it to work. – 6opko Mar 21 '21 at 10:07
  • This work with me. – victhangnguyen Dec 05 '22 at 04:15
  • This worked.... – Umair Qadir Aug 03 '23 at 04:53
164

.map files allow a browser to download a full version of the minified JS. It is really for debugging purposes.

In effect, the .map missing isn't a problem. You only know it is missing, as the browser has had its Developer tools opened, detected a minified file and is just informing you that the JS debugging won't be as good as it could be.

This is why libraries like jQuery have the full, the minified and the map file too.

See this article for a full explanation of .map files:

Dominic Zukiewicz
  • 8,258
  • 8
  • 43
  • 61
  • 1
    Downloads them? From where? I assumed that those .less files are packed somehow inside map file. And on page load, bootrap re-creates those files from a package. – dhblah Feb 14 '14 at 07:46
  • 1
    From the same directory it gets the .js from. Remember its only when the developer tools are open, not as a normal request. – Dominic Zukiewicz Feb 14 '14 at 10:22
  • Thanks for your reply, but I don't have `.less` files in my project. I only added `.css` and `.js` files and that `map` file. – dhblah Feb 14 '14 at 12:27
  • If there's a .js, its the browser that's interested in the .map file, its not Bootstrap itself. – Dominic Zukiewicz Feb 14 '14 at 19:59
  • Hi Dominic, I understand that the development tools would look for the map file if I had a minified version of bootstrap.css, but I have a non minified version and the map file is still requested. Only bootstrap has this problem, other libraries don't. Deleting the line in the CSS or creating a dummy file work, but I am still curious to understand the why of the attempt at loading a map file. Thanks – Raymond Dec 06 '14 at 11:27
  • 1
    @Raymond: The developer tools don't understand the file names like .min.css - after all - can we guarantee is it minified? No .. it will download the .map just to ensure it has both copies available. Again, this is being enabled with the developer tools. If you close the tools window, it won't be requested. – Dominic Zukiewicz Dec 08 '14 at 17:52
  • 4
    To reiterate, the .map file is only requested and used only when the dev tools are open, so if it's missing, you are not getting any extra failing requests when a typical users go to your page. – tomf Aug 06 '15 at 16:57
  • Link to html5rocks doesn't work anymore. – user31782 Nov 16 '22 at 00:12
44

This only happens when you use the dev-tools, and won't happen for normal users accessing the production server.

In any case, I found it useful to simply disable this behavior in the dev-tools: open the settings and uncheck the "Enable source maps" option.

There will no longer be an attempt to access map files.

Shovalt
  • 6,407
  • 2
  • 36
  • 51
  • 1
    I think this might be most relevant answers. Others are relevant only if mentioned files as packaged with your application - which isn't the case all the time. – Lukino May 06 '20 at 18:31
  • 1
    Disabling source maps may disable other things you actually want source maps for, such as when using a modern js framework like svelte, it maps the svelte source into the rendered source during dev mode so that original source files show up in devtools breakpoints etc. Very useful if you're using those frameworks. – Chris Mountford Jul 10 '21 at 09:19
  • @ChrisMountford: Still, it is nice to actually know what such a "map" is used for, and can be disabled. For me disabling it prevents unwanted error messages in the console. – KIKO Software Dec 17 '21 at 09:29
  • @KIKOSoftware it's worth noting you can filter out unwanted console messages using the filter text field. See https://developer.chrome.com/docs/devtools/console/reference/#filter – Chris Mountford May 27 '22 at 05:33
  • I just don't want this hitting my development server unnecessarily since that's not suppose to happen on live sites. – Nelson May 19 '23 at 08:28
  • you are the real MVP – BanAnanas Jun 20 '23 at 14:11
  • I have the same problem now happening still with /polyfills.js.map /runtime.js.map and /main.js.map (Angular) – BanAnanas Jun 20 '23 at 14:19
28

Remove the line /*# sourceMappingURL=bootstrap.css.map */ in bootstrap.css

If the error persists, clean the cache of the browser (CTRL + F5).

Vincent
  • 4,342
  • 1
  • 38
  • 37
Nicolás Jofré
  • 465
  • 4
  • 3
28

Delete the line "/*# sourceMappingURL=bootstrap.min.css.map */ " in following files:

  • css/bootstrap.min.css
  • css/bootstrap.css

To fetch the file path in Linux use the command find / -name "\*bootstrap\*"

SwissCodeMen
  • 4,222
  • 8
  • 24
  • 34
Avinash Kancharla
  • 405
  • 4
  • 3
  • 1
    Source map files, like bootstrap.min.css.map, are generated automatically during files minification/compiling process. They actually are not needed for the production, but at the same time occupy 3 times more disk space than ones which they are mapping. That's why we don't include them in the release. If you want just to remove that message, you can either remove comments like /*# sourceMappingURL=bootstrap.min.css.map */ in bootstrap.min.css, bootstrap.min.js and popper.min.js or download source map files from a Bootstrap 4.1.3 release and put them inside libs directory. – Ajay Takur May 06 '20 at 13:15
  • The main issue is it ignores URL arguments. For example, `/r/d?f=bootstrap.min.css` currently is setting browsers to load `/r/bootstrap.min.css.map`, which may result in 404 or event redirect. Even you'd specify exact `.map` locations (i.e. in ``), it still tries to download it from an incorrect location - ignores the downloaded one. – Artfaith Dec 22 '21 at 00:22
13

From bootstrap.css remove last line /*# sourceMappingURL=bootstrap-theme.css.map */

SwissCodeMen
  • 4,222
  • 8
  • 24
  • 34
Saineshwar Bageri - MVP
  • 3,851
  • 7
  • 41
  • 47
9

If you don't have the correct .map file and you don't want to edit lines in bootstrap.css you can create a dummy .map file.

In my case I was seeing the error:

GET /bootstrap.css.map not found.

So I created an empty bootstrap.css.map in the /public directory and the error stopped.

Julian Mann
  • 6,256
  • 5
  • 31
  • 43
  • 1
    Doesn't work with `bower` or something like that because in production mode will install the bootstrap from the source. Same for any answer that says to remove the line `/*# sourceMappingURL=bootstrap.css.map */`. – monteirobrena Sep 22 '15 at 11:28
7

Delete the last line in bootstrap.css

folllowing line

/*# sourceMappingURL=bootstrap.css.map */
SwissCodeMen
  • 4,222
  • 8
  • 24
  • 34
user1498608
  • 71
  • 1
  • 1
7

Delete /*# sourceMappingURL=bootstrap.min.css.map */ in css/bootstrap.min.css

and delete /*# sourceMappingURL=bootstrap.css.map */ in css/bootstrap.css

Sergio Perez
  • 571
  • 6
  • 6
4

Follow that tutorial: Disable JavaScript With Chrome DevTools

Summary:

  1. Open your code Inspector (right click)
  2. Press Control+Shift+P and search "Disable JavaScript source maps"
  3. Do same for "Disable CSS source maps"
  4. Press control+F5 to clear cache and reload page.
codeMaster
  • 176
  • 1
  • 4
2

For me, created an empty bootstrap.css.map together with bootstrap.css and the error stopped.

fw0213
  • 21
  • 1
1

I had also warnings in Google Dev-Tools and I added only bootstrap.min.css.map file in the same folder, where bootstrap.min.css is.

I have now no warnings more and You can find more Explanation here: https://github.com/twbs/bootstrap#whats-included

I hope, I answered your Question.

SVANSKI
  • 426
  • 3
  • 13
1

Okay Recently I faced this problem I have very simple solution for solve this Issue , follow these steps: go to these directories src-> app-> index.html open the index.html and find <base href="your app name ">change this to <base href="/">

Sachin from Pune
  • 656
  • 8
  • 19
1

Deleting this line fixes it, but the problem is the boostrap files are in bower_components and not checked into source control.

So, every developer on the team will get the css file with the map reference when they pull the repo and do bower install (which is part of using a new repo).

The file should not have the reference to a map that is not there.

Steve
  • 14,401
  • 35
  • 125
  • 230