206

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.

2

14 Answers 14

262

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

4
  • 59
    Please explain your answer in brief to make your answer more useful for OP and other readers.
    – Mohit Jain
    May 28, 2014 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, 2017 at 5: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! Oct 31, 2017 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, 2021 at 10:07
165

.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:

9
  • 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, 2014 at 7: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. 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 that map file.
    – dhblah
    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. Dec 8, 2014 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 6, 2015 at 16:57
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.

7
  • 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 6, 2020 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. 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. 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 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.
    – Nelson
    May 19, 2023 at 8:28
30

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

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

3
29

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\*"

2
  • 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 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.
    – Artfaith
    Dec 22, 2021 at 0:22
14

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

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.

1
  • 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 */. Sep 22, 2015 at 11:28
8

Delete the last line in bootstrap.css

folllowing line

/*# sourceMappingURL=bootstrap.css.map */ 
1
  • try explaining issue and how your answer gets solution, its good practice which allows new user to learn what had happened Apr 16, 2015 at 5:15
7

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

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

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.
3

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

0
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.

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.

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="/">

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.