Was werden die .map-Dateien in Bootstrap 3.x verwendet?

Question

Im CSS-Ordner sind zwei Dateien mit der Dateierweiterung .map enthalten. Sie sind:

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

Es scheint sich um minimierte Dateien zu handeln, aber ich weiß nicht, wofür sie verwendet werden.

Answer 1

Von Arbeiten mit CSS-Präprozessoren in Chrome DevTools:

Viele Entwickler generieren CSS-Stylesheets mithilfe eines CSS-Präprozessors wie Sass, Less oder Stylus. Da die CSS-Dateien generiert werden, ist das direkte Bearbeiten der CSS-Dateien nicht so hilfreich.

Für Präprozessoren, die CSS-Quellkarten unterstützen, ermöglichen es DevTools, Ihre Präprozessor-Quelldateien im Sources-Panel live zu bearbeiten und die Ergebnisse anzuzeigen, ohne DevTools verlassen oder die Seite neu laden zu müssen. Wenn Sie ein Element inspizieren, dessen Stile durch eine generierte CSS-Datei bereitgestellt werden, zeigt das Elements-Panel einen Link zur originalen Quelldatei an, nicht zur generierten .css-Datei.

Answer 2

Wenn Sie den Fehler nur loswerden möchten, können Sie diese Zeile auch in bootstrap.css löschen:

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

Answer 3

Dies sind Quellkarten. Stellen Sie diese zusammen mit komprimierten Quelldateien bereit; Entwicklerwerkzeuge wie die in Firefox und Chrome werden sie verwenden, um Debugging zu ermöglichen, als ob der Code nicht komprimiert wäre.

Answer 4

Was ist eine CSS-Karten Datei?

Es handelt sich um eine JSON-Format Datei, die die CSS-Datei mit ihren Quelldateien verknüpft, normalerweise Dateien, die in Preprozessoren geschrieben sind (z.B. Less, Sass, Stylus, etc.), dies geschieht um eine Live-Debugging der Quelldateien im Webbrowser zu ermöglichen.

Was ist ein CSS-Präprozessor? Beispiele: Sass, Less, Stylus

Es handelt sich um ein CSS-Generierungstool, das die Programmierkraft nutzt, um CSS robust und schnell zu generieren.

Answer 5

Das Bootstrap-CSS kann durch Less generiert werden. Der Hauptzweck der Kartendatei besteht darin, das CSS-Quellcode mit dem Less-Quellcode in den Chrome Dev-Tool zu verknüpfen. Wie wir es früher gemacht haben. Wenn wir das Element im Chrome Dev-Tool inspizieren, können wir den Quellcode des CSS sehen. Aber wenn die Kartendatei auf der Seite mit der Bootstrap-CSS-Datei eingebunden ist, können Sie den Less-Code sehen, der auf den Elementstil angewendet wird, den Sie inspizieren möchten.