Lors de la compilation des déclarations de contenu de police dans SCSS, la sortie est corrompue. Au lieu de produire la séquence d'échappement de caractère comme je m'y attendrais, par exemple content: \f26e;, le sass-loader génère un seul caractère non affichable, représenté par un carré, par exemple content: ""; Les caractères peuvent être trouvés à la fois dans le js bundle ainsi que le CSS extrait.

Vous pouvez voir clairement dans le CSS fourni avec le package de nœuds Font Awesome comment il doit être écrit dans le fichier

.fa-500px:before {
  content: "\f26e"; }

Comment ça s'écrit dans mon fichier

.fa-500px:before {
  content: "";
}

J'essayais de créer des styles à partir des styles Font Awesome lorsque j'ai découvert le problème. J'ai décidé d'essayer de recompiler Font Awesome, mais le problème persistait également. J'ai cherché partout et je n'ai trouvé aucune ressource indiquant que je le fais mal, mais c'est mon hypothèse et non qu'il y a quelque chose qui ne va pas avec Webpack sass-loader.

J'ai créé un dépôt qui illustre le problème : https://github.com/rlvandaveer/ sass-loader-fontawesome-gist

1
Robb Vandaveer 17 févr. 2020 à 19:14

1 réponse

Meilleure réponse

En creusant davantage, j'ai déterminé que ce n'était pas vraiment un problème. Les deux cas ci-dessus sont équivalents. Le premier est un code d'échappement ASCII et le second est le caractère Unicode littéral correspondant (qui n'est pas rendu correctement). L'exemple de référentiel utilise l'implémentation dart sass qui fonctionne différemment de l'implémentation node-sass à laquelle j'étais habitué. Ce problème dart-sass confirme la différence entre les deux implémentations.

Espérons que cette réponse sauvera quelqu'un d'une confusion similaire n00by.

1
Robb Vandaveer 18 févr. 2020 à 02:29