Heritiana Antonio Frond end Designer | Developer

Hello, I am

Heritiana Antonio

Frond end Designer | Developer

Chapitre 8 : Livrer le CSS : source maps et fichier allégé

1 min de lecture

Chapitre 8 : Livrer le CSS : source maps et fichier allégé

Objectif

À la fin de ce chapitre, le dossier css/ contient deux feuilles. style.css reste lisible, et style.css.map relie chaque règle au fichier Sass d’origine. style.min.css tient sur une ligne, sans cette carte. L’écran ne change pas.

Le dossier mon-sass continue. Depuis la racine, la veille reste celle d’hier :

npx sass --watch scss/style.scss css/style.css

index.html charge encore css/style.css. Vous ne changez cette balise link qu’au moment de l’essai, puis vous la remettez.

La veille a déjà deux fichiers

Ouvrez css/. À côté de style.css se trouve style.css.map. Sass l’écrit dès que la sortie est un fichier. La dernière ligne de la feuille est un commentaire :

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

Ce n’est pas une règle. Le navigateur s’en sert pour trouver la carte. Au-dessus, le CSS est développé : une déclaration par ligne. body porte Georgia, serif et #1f2933. .marge-s porte encore 0.5rem. Aucun dollar, aucun @use.

La carte n’est pas chargée par index.html. Seule la feuille l’est. Le commentaire suffit à indiquer le fichier voisin.

Lire la carte

style.css.map est du JSON. Les clés utiles sont version, sources, mappings et file. Dans le projet rangé au chapitre précédent, sources ressemble à ceci :

"sources": [
  "../scss/base/_page.scss",
  "../scss/abstracts/_variables.scss",
  "../scss/components/_carte.scss",
  "../scss/components/_boutons.scss",
  "../scss/components/_messages.scss",
  "../scss/utilities/_espaces.scss"
]

Le chemin part de css/. ../scss remonte dans mon-sass, puis entre dans les sources. file vaut style.css. mappings est une longue ligne : elle aligne les lignes du CSS sur celles du Sass. Vous ne la déchiffrez pas à la main.

Trois absents sont normaux. style.scss ne fait que charger des dossiers. Les _index.scss ne font que transmettre. _outils.scss ne contient que des fonctions : message("succes") a déjà été remplacé par #2a6f4e, et espace(2) par 1rem. La carte désigne les fichiers qui ont laissé une déclaration.

L’inspecteur suit le commentaire

Ouvrez index.html dans le navigateur. Inspectez body. Quand la carte est lue, la règle est rattachée à base/_page.scss.

Si vous ne voyez que style.css, le commentaire a disparu, ou style.css.map n’est plus à côté de la feuille. Remettez la compilation habituelle, sans option de style :

npx sass scss/style.scss css/style.css

La feuille redevient développée, et le commentaire revient en dernière ligne.

Écrire le fichier court

Laissez la veille tourner. Elle surveille style.css. Le fichier à livrer porte un autre nom. Depuis mon-sass :

npx sass --style=compressed --no-source-map scss/style.scss css/style.min.css

--style=compressed retire les sauts de ligne et les espaces qui séparent les déclarations. --no-source-map est nécessaire : avec Sass actuel, la carte reste produite même en style compressé. Sans ce drapeau, vous obtenez aussi style.min.css.map, et le commentaire est collé à la fin de l’unique ligne.

Ouvrez style.min.css. Tout tient sur une ligne, qui se termine par la dernière règle, sans sourceMappingURL. .marge-s{margin-bottom:.5rem} reprend 0.5rem : le zéro qui précède le point tombe, la mesure reste la même. body{font-family:Georgia,serif;color:#1f2933;margin:2rem} garde la police et la couleur. #f7f3ea, #2a6f4e et #9b2226 sont inchangés.

Ne pointez pas la veille vers style.min.css. Elle réécrirait ce fichier au style développé à chaque enregistrement. Le fichier court se produit avec la commande séparée, sans --watch. Si style.css a été écrasé par une compilation compressée, la commande sans --style le reconstruit.

Une carte qui reste sur le disque

Si vous avez déjà lancé le style compressé sans --no-source-map, css/style.min.css.map est encore là. Relancer la commande avec le drapeau ne l’efface pas. Le nouveau CSS ne le cite plus, mais un envoi du dossier css/ l’emporterait quand même. Effacez ce fichier à la main.

style.css.map reste à côté de la feuille développée. Cette carte sert pendant le travail.

Encastrer la carte alourdit la feuille

--embed-source-map copie la carte dans le commentaire sourceMappingURL, sous forme d’une longue adresse data:. Il n’y a plus de fichier .map séparé. Sur ce projet, la feuille devient plus lourde que le CSS développé, parce que le texte de la carte est recopié dedans. Vous gardez la carte à part, à côté de style.css. Le fichier destiné à la page n’en contient pas.

Brancher la page sur le fichier court

Dans index.html, la balise link vise css/style.css. Remplacez-la le temps d’un essai par css/style.min.css. Rechargez. Les couleurs, les marges et les boutons sont les mêmes. L’inspecteur montre la ligne unique, et plus _page.scss : cette feuille n’a pas de carte.

Remettez css/style.css. La veille et l’inspecteur s’appuient sur la feuille développée. style.min.css est celui que vous joignez à la page quand vous quittez l’établi. Les deux peuvent cohabiter dans css/.

Un nom de style refusé

Les anciens styles compact et nested ne sont plus acceptés. Lancez :

npx sass --style=compact scss/style.scss css/style.min.css

Le terminal répond :

"compact" is not an allowed value for option "--style".

Aucun nouveau fichier n’est écrit. Les deux valeurs reconnues sont expanded, le défaut de la veille, et compressed, celui du fichier court.

Exercice

Reprenez mon-sass. La veille reste npx sass --watch scss/style.scss css/style.css. style.scss garde ses trois @use.

  1. Ouvrez css/style.css. La dernière ligne est /*# sourceMappingURL=style.css.map */. Le fichier style.css.map est à côté.
  2. Dans la carte, lisez sources. Retrouvez ../scss/base/_page.scss. style.scss, les index et _outils.scss n’y figurent pas.
  3. Ouvrez la page et inspectez body. La règle cite base/_page.scss quand la carte est chargée. Si vous ne voyez que style.css, relancez npx sass scss/style.scss css/style.css.
  4. Lancez npx sass --style=compressed --no-source-map scss/style.scss css/style.min.css. La feuille tient sur une ligne, sans sourceMappingURL. .marge-s utilise .5rem. #1f2933, #f7f3ea, #2a6f4e et #9b2226 sont là. S’il existe un style.min.css.map, effacez-le.
  5. Pointez le link vers css/style.min.css, rechargez, puis ramenez-le vers css/style.css. L’écran ne change pas d’un essai à l’autre.
  6. Lancez la même commande avec --style=compact. Lisez "compact" is not an allowed value for option "--style". style.min.css n’a pas été remplacé.

C’est réussi quand la feuille lisible et sa carte sont en place, quand le fichier court n’a ni carte ni commentaire, et quand index.html vise de nouveau css/style.css. Si la page perd ses couleurs au cinquième pas, le link vise un autre nom que celui écrit par la commande.

À retenir

  • La veille écrit style.css et style.css.map. Le commentaire sourceMappingURL relie les deux.
  • sources liste les partiels qui ont laissé du CSS. L’entrée, les index et les fonctions seules n’y sont pas.
  • --style=compressed produit une ligne. Sans --no-source-map, Sass écrit encore une carte, et il ne l’efface pas ensuite.
  • Le fichier court a un autre nom que la feuille surveillée. 0.5rem y devient .5rem. Les couleurs restent.
  • expanded et compressed sont les deux styles acceptés. compact est refusé avant toute écriture.

La suite

Le cours SASS s’arrête sur cette séparation. style.css et sa carte restent l’établi. style.min.css est le fichier que la page peut recevoir. Le prochain cours, Apprendre JavaScript, ouvrira une autre page : la première leçon s’appelle « Première page interactive ». Laissez mon-sass ainsi, avec les quatre dossiers, les trois lignes de style.scss, et le lien d’index.html ramené vers css/style.css.