IP Girl
  1. IP Girl
  3. Quels sont les fichiers .map utilisés dans Bootstrap 3.x?
Intereting Posts
Personnaliser la couleur de mon UIActivityIndicatorView git push dit tout à jour même si j’ai des changements locaux Comment enregistrer un tracé en tant qu’image sur le disque? Abstraction VS Information masquant VS Encapsulation Comment lister tous les fichiers dans un commit? Comment fonctionne le codage à largeur variable UTF-8? Quelle est la différence entre et , et ? Dans Clojure, comment puis-je convertir une chaîne en nombre? J’ai besoin de ce bébé dans un mois – envoie-moi neuf femmes! Requête MySQL pour obtenir “l’intersection” de nombreuses requêtes avec des limites Comment calculer l’angle de rebond? VS 2015 RTM web.config L’élément global ‘configuration’ a déjà été déclaré Comment puis-je empêcher la zone de texte de s’étendre au-delà de son élément DIV parent? (problème de Google Chrome uniquement) La boîte Vagante est introuvable ou inaccessible dans le catalogue distant – version curl incompatible Comment lancer une fenêtre Git Bash avec un répertoire de travail particulier en utilisant un script?

Quels sont les fichiers .map utilisés dans Bootstrap 3.x?

Deux fichiers sont inclus dans le dossier CSS avec des extensions de fichier .map. Elles sont: 

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

Ils semblent être des fichiers minifiés mais je ne sais pas à quoi ils servent.

A partir de l’utilisation de préprocesseurs CSS dans Chrome DevTools :

De nombreux développeurs génèrent des feuilles de style CSS en utilisant un préprocesseur CSS, tel que Sass, Less ou Stylus. Les fichiers CSS étant générés, l’édition directe des fichiers CSS n’est pas aussi utile.

Pour les préprocesseurs qui prennent en charge les cartes source CSS, DevTools vous permet de modifier en direct vos fichiers sources de préprocesseur dans le panneau Sources et d’afficher les résultats sans avoir à quitter DevTools ou à actualiser la page. Lorsque vous inspectez un élément dont les styles sont fournis par un fichier CSS généré, le panneau Éléments affiche un lien vers le fichier source d’origine et non le fichier .css généré.

Si vous voulez simplement vous débarrasser de l’erreur, vous pouvez également supprimer cette ligne dans bootstrap.css : 

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

Ce sont des cartes sources. Fournissez-les avec les fichiers source compressés; Les outils de développement tels que ceux de Firefox et de Chrome les utiliseront pour permettre le débogage comme si le code n’était pas compressé.

Le css bootstrap peut être généré par Less. Le but principal du fichier map est de lier le code source css à moins de code source dans l’outil de développement chrome. Comme nous le faisions auparavant. Si nous inspectons l’élément dans l’outil de développement de chrome. vous pouvez voir le code source de css. Mais si inclure le fichier de carte dans la page avec le fichier css bootstrap. vous pouvez voir le moins de code qui s’applique au style d’élément que vous voulez inspecter.

Vous êtes-vous déjà attendu à ce que votre code côté client soit lisible et, surtout, que vous puissiez le déboguer, même après l’avoir combiné et modifié, sans impact sur les performances? Eh bien maintenant vous pouvez grâce à la magie des cartes source.

Cet article explique les cartes sources en utilisant une approche pratique.

Pour ceux qui sont venus chercher ces fichiers (comme moi), vous pouvez généralement les trouver en ajoutant .map à la fin de l’URL:

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

Assurez-vous de remplacer la version par la version de Bootstrap que vous utilisez.

Si vous vous demandez pourquoi il manque les fichiers de carte avec Bootstrap 3.x; Assurez-vous d’avoir la bonne version installée. Je devais charger 3.3.7 pour obtenir l’effet désiré que je cherchais.