[twitter-bootstrap] Bootstrap trying to load map file. How to disable it? Do I need to do it?

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.

This question is related to twitter-bootstrap twitter-bootstrap-3

The answer is


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

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


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.


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.


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.


Delete the last line in bootstrap.css

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


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

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


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


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


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


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


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


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.


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.

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