it-swarm.com.de

wofür werden die .map-Dateien in Bootstrap 3.x verwendet?

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

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

Sie scheinen verminderte Dateien zu sein, aber ich weiß nicht, wozu sie dienen.

398
wetjosh

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

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

Bei Präprozessoren, die CSS-Quellzuordnungen unterstützen, können Sie mit DevTools Ihre Präprozessor-Quelldateien im Quellenbedienfeld live bearbeiten und die Ergebnisse anzeigen, ohne dass Sie DevTools verlassen oder die Seite aktualisieren müssen. Wenn Sie ein Element untersuchen, dessen Stile von einer generierten CSS-Datei bereitgestellt werden, zeigt das Bedienfeld Elemente einen Link zur ursprünglichen Quelldatei und nicht zur generierten .css-Datei.

406
Steve Jansen

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

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

Dies sind Quellkarten. Stellen Sie diese neben komprimierten Quelldateien bereit. Entwicklertools wie die in Firefox und Chrome verwenden sie, um das Debuggen zu ermöglichen, als wäre der Code nicht komprimiert.

66
davidism

Die Bootstrap-Datei kann mit Less erstellt werden. Der Hauptzweck der Map-Datei wird verwendet, um den CSS-Quellcode mit weniger Quellcode im Chrome-Entwickler-Tool zu verknüpfen. Wie auch früher. Sie können den Quellcode von css ..__ sehen. Wenn Sie jedoch die Map-Datei in die Bootstrap-CSS-Datei einfügen, müssen Sie sie in die Seite aufnehmen. Sie können den weniger Code sehen, der für den Elementstil gilt, den Sie untersuchen möchten. 

9
Joe.wang

Haben Sie sich jemals gewünscht, dass Sie Ihren clientseitigen Code auch nach der Kombination und Minimierung lesbar und vor allem debuggbar halten können, ohne die Leistung zu beeinträchtigen? Nun können Sie durch die Magie der Quellkarten.

Dieser Artikel erklärt Quellkarten anhand eines praktischen Ansatzes.

8

Für jeden, der hierher gekommen ist, um nach diesen Dateien zu suchen (wie ich), können Sie sie normalerweise finden, indem Sie am Ende der URL .map hinzufügen:

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

Stellen Sie sicher, dass Sie die Version durch die von Ihnen verwendete Bootstrap-Version ersetzen. 

5
Travis Heeter

Wenn Sie sich fragen, warum Sie die Kartendateien mit Bootstrap 3.x vermissen? Stellen Sie sicher, dass Sie die richtige Version installiert haben. Ich musste 3.3.7 laden, um den gewünschten Effekt zu erzielen.

0
TheJoe

Was ist eine CSS-Map-Datei?

Dies ist eine JSON-Formatdatei, die die CSS-Datei mit den Quelldateien verknüpft, normalerweise mit Dateien, die in Less, Saas, Sylus usw. geschrieben wurden. Dies ist erforderlich, um die Quelldateien vom Webbrowser aus live zu debuggen. 

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

Es ist ein CSS-Generator-Tool, das Programmierleistung verwendet, um CSS robust und schnell zu generieren.

0
Shadi Namrouti