505

There are two files included in the CSS folder with .map file extensions. They are:

bootstrap-theme.css.map
bootstrap.css.map

They appear to be minified files but I don't know what they are for.

0

8 Answers 8

500

From Working with CSS preprocessors in Chrome DevTools:

Many developers generate CSS style sheets using a CSS preprocessor, such as Sass, Less, or Stylus. Because the CSS files are generated, editing the CSS files directly is not as helpful.

For preprocessors that support CSS source maps, DevTools lets you live-edit your preprocessor source files in the Sources panel, and view the results without having to leave DevTools or refresh the page. When you inspect an element whose styles are provided by a generated CSS file, the Elements panel displays a link to the original source file, not the generated .css file.

7
  • 24
    It sounds like these are these analagous to debug symbols in a programming language, no? Commented Mar 7, 2014 at 15:04
  • 1
    i was getting js error, so i made a fake file in that directory, to stop the error from showing.
    – user595349
    Commented Jun 25, 2014 at 11:30
  • 3
    @IssaFarax You can disable loading source maps through the ChromeDev tools settings. Open DevTools > Click the settings gear > Uncheck Enable (JavaScript|CSS) source maps Commented Jun 25, 2014 at 18:39
  • 1
    you can also ref : stackoverflow.com/questions/21766880/… Commented May 5, 2015 at 13:06
  • and here more detailed explanation for JS and CSS and when , why to use it
    – Shaiju T
    Commented Nov 1, 2015 at 9:25
201

If you just want to get rid of the error, you can also delete this line in bootstrap.css:

/*# sourceMappingURL=bootstrap.css.map */
3
  • 65
    Or just the hash # and it will turn into a simple comment, in case you want it back later.
    – givanse
    Commented Nov 5, 2014 at 0:35
  • 1
    You do not want this for production environment, so compile it accordingly (gulp --production if you use gulp, this will not include that sourceMapping line) and exclude *.map files from your uploads to production server. Commented Sep 14, 2015 at 21:27
  • 5
    OP asked "What are the .map files used in Bootstrap 3.x"? This "answer" instead talks about how to get rid of some unspecified error.
    – Asker
    Commented Aug 16, 2022 at 1:46
80

These are source maps. Provide these alongside compressed source files; developer tools such as those in Firefox and Chrome will use them to allow debugging as if the code was not compressed.

16

What is a CSS map file?

It is a JSON format file that links the CSS file to its source files, normally, files written in preprocessors (i.e., Less, Sass, Stylus, etc.), this is in order do a live debug to the source files from the web browser.

What is CSS preprocessor? Examples: Sass, Less, Stylus

It is a CSS generator tool that uses programming power to generate CSS robustly and quickly.

2
  • 1
    Should they be treated as text files, or byte streams? Should they end in \n? Commented May 8, 2020 at 1:34
  • @AaronFranke They are text files. I suggest you copy the content of a .map file and paste it on jsonblob.com to see the JSON key/value pairs Commented May 9, 2020 at 5:31
12

The bootstrap css can be generated by Less. The main purpose of map file is used to link the css source code to less source code in the chrome dev tool. As we used to do .If we inspect the element in the chrome dev tool. you can see the source code of css. But if include the map file in the page with bootstrap css file. you can see the less code which apply to the element style you want to inspect.

9

For anyone who came here looking for these files (Like me), you can usually find them by adding .map to the end of the URL:

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css.map

Be sure to replace the version with whatever version of Bootstrap you're using.

9

Map files (source maps) are there to de-reference minified code (css and javascript).

And they are mainly used to help developers debugging a production environment, because developers usually use minified files for production which makes it impossible to debug. Map files help them de-referencing the code to see how the original file looked like.

7

Have you ever found yourself wishing you could keep your client-side code readable and more importantly debuggable even after you've combined and minified it, without impacting performance? Well now you can through the magic of source maps.

This article explains Source Maps using a practical approach.

1
  • This link (as of 2024) explains everything in the Universe.
    – Plamen
    Commented Apr 15, 2024 at 6:25

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.