Home / Questions / 161022
Accepted
Jheyman Mejia
Asked: 2020-05-03 12:08:40 +0800 CST 2020-05-03 12:08:40 +0800 CST

How to modify a bootstrap css.map?

  • 772

Good day,

I am working on a template that I have downloaded from bootstrab. I need to center a div, the problem is that when applying the lines margin-left: auto; margin-right: auto;in the main style sheet (style .css ), the changes are not reflected when executing my index.html

I have checked with the Chrome DevTools and I realize that the lines margin-must be added to a style .css.map file

I already found the css settings of the DIV inside the .css.map but I don't know how to paste them.

This is how the DIV originally came in the .css :

.mb-lg-0,
  .my-lg-0 {
    margin-bottom: 0 !important;
   
  }

Then I added the margin: (They didn't work)

.mb-lg-0,
  .my-lg-0 {
    margin-bottom: 0 !important;
    margin-left: auto;
    margin-right: auto;
  }

These are the styles that the DIV originally comes with in .css.map

.mb-lg-0,\n  .my-lg-0 {\n    margin-bottom: 0 !important;\n  }

I have never worked with .css.map files

I tried doing this (imagining that the \nare jumps), after !important;but it didn't work :c

{\n margin-left: auto;\n  margin-right: auto; \n }

How should I modify a .css.map sheet ?

css

2 Answers

  1. Best Answer

    The files .mapare not for editing or writing CSS. Here's what Google says about it: map pre-processed code to source code .

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

    For preprocessors that support CSS source maps, DevTools allows you to live edit the 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.

    You can also directly remove the line that calls the file .mapin your style sheet.

    This could be the line you should remove, in that case: 

    /*# sourceMappingURL=style.css.map */
    • 2

  2. The map is of no use to you if you are not going to edit the source file. What you shouldn't do is modify the bootstrap classes directly, it's not designed to work like this and the safest thing is that you load something else in another part of the web, or that it doesn't work for you in a certain size, or it doesn't work for you no more You must look for a solution within the BS itself. Or at least create a new class to interfere as little as possible, type:

    my-center{
margin-left: auto !important;
margin-right:auto !important;
}
    • 2