La feuille de style n'est pas chargée à cause du type MIME

Question

Je travaille sur un site web qui utilise gulp pour compiler et browser sync pour garder le navigateur synchronisé avec mes changements.

La tâche gulp compile tout correctement, mais sur le site web, je ne peux voir aucun style, et la console affiche ce message d'erreur :

Refus d'appliquer le style de ' http://localhost:3000/assets/styles/custom-style.css parce que son type MIME type MIME ('text/html') n'est pas un type MIME de feuille de style pris en charge, et que la vérification MIME stricte est activée.

Maintenant, je ne comprends pas vraiment pourquoi cela se produit.

Le HTML inclut le fichier comme ceci (ce dont je suis sûr qu'il est correct) :

<link rel="stylesheet" type="text/css" href="assets/styles/custom-style.css"/>

Et la feuille de style est une fusion entre les styles Bootstrap et font-awesome pour le moment (rien de personnalisé pour le moment).

Le chemin est également correct, puisqu'il s'agit de la structure du dossier :

index.html
assets
|-styles
  |-custom-style.css

Mais je continue à obtenir l'erreur.

Qu'est-ce que cela pourrait être ? Est-ce quelque chose (peut-être un paramètre ?) pour gulp/browsersync peut-être ?

Answer 1

Pour les applications Node.js, vérifiez votre configuration :

app.use(express.static(__dirname + '/public'));

Remarquez que /public n'a pas de barre oblique à la fin, vous devrez donc l'inclure dans l'option href de votre HTML :

href="http://stackoverflow.com/css/style.css">

Si vous avez inclus une barre oblique ( /public/ ), vous pouvez simplement faire href="css/style.css" .

Answer 2

Dans la plupart des cas, il s'agit simplement du Le chemin du fichier CSS est incorrect . Le serveur web renvoie donc status: 404 avec quelques Not Found contenu de la charge utile de html type.

Le navigateur suit ce (mauvais) chemin depuis <link rel="stylesheet" ...> avec l'intention d'appliquer des styles CSS. Mais le type de contenu renvoyé est contradictoire, ce qui entraîne l'enregistrement d'une erreur.

Answer 3

Le problème, je pense, était qu'une bibliothèque CSS commençait par des commentaires.

Pendant le développement, je ne réduis pas les fichiers et je ne supprime pas les commentaires. Cela signifiait que la feuille de style commençait avec quelques commentaires, ce qui faisait qu'elle était perçue comme quelque chose de différent de CSS.

Le problème a été résolu en supprimant la bibliothèque et en la plaçant dans un fichier vendeur (qui est TOUJOURS minifié sans commentaires).

Encore une fois, je ne suis pas sûr à 100% qu'il s'agisse d'un correctif, mais c'est tout de même une victoire pour moi car cela fonctionne comme prévu maintenant.

Answer 4

Cette erreur peut également se produire lorsque vous ne vous référez pas correctement à votre fichier CSS.

Par exemple, si votre balise de lien est

<link rel="stylesheet" href="styles.css">

mais votre fichier CSS est nommé style.css (sans le deuxième s), il y a de fortes chances que vous voyiez cette erreur.

Answer 5

Créez un dossier juste en dessous/au-dessus du fichier style.css selon la structure d'Angular et créez un lien comme suit <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> .