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.

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

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

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

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

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

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.

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

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

Delete the last line in bootstrap.css

folllowing line

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

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.

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.

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

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

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.