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.
-
5Have any of the answers given below answer your question? If not, can you update your question so that we can improve our answers?– Dominic ZukiewiczCommented Jan 3, 2015 at 9:13
-
Possible duplicate of what are the .map files used for in Bootstrap 3.1?– m-smithCommented Dec 23, 2016 at 14:24
14 Answers
Delete the line /*# sourceMappingURL=bootstrap.css.map */
from bootstrap.css
-
59Please explain your answer in brief to make your answer more useful for OP and other readers. Commented May 28, 2014 at 11:29
-
16This works, but if bootstrap is referenced directly from node_modules, when bootstrap is re-installed, this will be overwritten back Commented Jan 26, 2017 at 5:39
-
4Wow! 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! Commented Oct 31, 2017 at 14:14
-
2Worth 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.– 6opkoCommented Mar 21, 2021 at 10:07
.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:
-
1Downloads 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.– dhblahCommented Feb 14, 2014 at 7:46
-
1From the same directory it gets the .js from. Remember its only when the developer tools are open, not as a normal request. Commented Feb 14, 2014 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 thatmap
file.– dhblahCommented Feb 14, 2014 at 12: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. Commented Dec 8, 2014 at 17:52
-
4To 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.– tomfCommented Aug 6, 2015 at 16:57
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.
-
1I 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.– LukinoCommented May 6, 2020 at 18:31
-
1Disabling 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. Commented Jul 10, 2021 at 9: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. Commented Dec 17, 2021 at 9:29
-
@KIKOSoftware it's worth noting you can filter out unwanted console messages using the filter text field. See developer.chrome.com/docs/devtools/console/reference/#filter Commented May 27, 2022 at 5:33
-
I just don't want this hitting my development server unnecessarily since that's not suppose to happen on live sites.– NelsonCommented May 19, 2023 at 8:28
Remove the line /*# sourceMappingURL=bootstrap.css.map */
in bootstrap.css
If the error persists, clean the cache of the browser (CTRL + F5).
-
14
-
4What's the point of giving the same answer someone else already gave years ago? stackoverflow.com/a/23909455/1879699– AndreasCommented Aug 5, 2020 at 13:03
-
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\*"
-
1Source 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. Commented May 6, 2020 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<head>
), it still tries to download it from an incorrect location - ignores the downloaded one.– ArtfaithCommented Dec 22, 2021 at 0:22
From bootstrap.css remove last line /*# sourceMappingURL=bootstrap-theme.css.map */
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.
-
1Doesn'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 */
. Commented Sep 22, 2015 at 11:28
Delete the last line in bootstrap.css
folllowing line
/*# sourceMappingURL=bootstrap.css.map */
-
try explaining issue and how your answer gets solution, its good practice which allows new user to learn what had happened Commented Apr 16, 2015 at 5:15
Delete /*# sourceMappingURL=bootstrap.min.css.map */ in css/bootstrap.min.css
and delete /*# sourceMappingURL=bootstrap.css.map */ in css/bootstrap.css
Follow that tutorial: Disable JavaScript With Chrome DevTools
Summary:
- Open your code Inspector (right click)
- Press Control+Shift+P and search "Disable JavaScript source maps"
- Do same for "Disable CSS source maps"
- Press control+F5 to clear cache and reload page.
For me, created an empty bootstrap.css.map together with bootstrap.css and the error stopped.
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.
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.
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="/">