Feuille de style non chargée en raison du type MIME


384

Je travaille sur un site Web qui utilise gulppour compiler et synchroniser le navigateur pour garder le navigateur synchronisé avec mes modifications.

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

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

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

Le HTML inclut le fichier comme celui-ci (qui, j'en suis sûr, est correct):

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

Et la feuille de style est une fusion entre Bootstrap et des styles impressionnants pour le moment (rien de personnalisé pour le moment).

Le chemin est également correct, car il s'agit de la structure des dossiers:

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

Mais je continue de recevoir l'erreur.

Qu'est ce que ça pourrait être? Est-ce quelque chose (peut-être un paramètre?) Pour gulp / Browsersync peut-être?


J'obtenais cela lorsque ma feuille de style liée a commencé avec une balise html <style ... au lieu de simplement sauter directement dans les règles de style. J'ai également obtenu cela lors de la liaison dans un fichier html chargé plus tard (AngularJS), je suis donc passé au chargement dynamique au chargement de la page via JavaScript et le problème a disparu.
Newclique

82
Cela se produit lorsque vous définissez une URL incorrecte pour le fichier ou lorsque votre serveur n'est pas configuré correctement. Dans le résultat, le navigateur N'OBTIENT PAS la feuille de style, mais il obtient du HTML avec le statut 404 et avec l'en-tête "Content-Type". Étant donné que le navigateur obtient quelque chose du serveur, il ne vous dit pas qu'il n'y a pas de réponse, mais il vous indique que le type MIME du fichier est incorrect. Le moyen le plus rapide de le vérifier est simplement d'essayer d'ouvrir le fichier directement http://localhost:3000/assets/styles/custom-style.cssdans un nouvel onglet.
RussCoder

6
Pour moi, c'était le cas décrit par RussCoder. La raison derrière cela est que j'ai utilisé Angular et j'ai oublié d'ajouter un fichier css à l'empaquetage des styles dans angular.json. Il a donc été ignoré lors de la création de l'application.
Jana

1
Je pourrais être en mesure de résoudre ce problème par des configurations de sécurité de printemps. Il bloquait l'accès au dossier de ressources.
sndu

2
Une mauvaise proxy.conf.jsonconfiguration nous a conduit à cette erreur étrange, car la transmission de la demande à l'API backend ne fonctionnait pas correctement, d'où la réponse d'erreur HTML.
ktsangop

Réponses:


139

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

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

Remarquez qu'il /publicn'y a pas de barre oblique à la fin, vous devrez donc l'inclure dans votre option href de votre HTML:

href="/css/style.css">

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


href = "/ assets / style.css"> dans mon cas a résolu le problème!
Sergio Guerjik

127

Le problème, je pense, était avec une bibliothèque CSS commençant par des commentaires.

Pendant le développement, je ne minimise pas les fichiers et je ne supprime pas les commentaires. Cela signifiait que la feuille de style commençait par quelques commentaires, ce qui la faisait apparaître comme quelque chose de différent de CSS.

La suppression de la bibliothèque et sa mise dans un fichier fournisseur (qui est TOUJOURS minifié sans commentaires) a résolu le problème.

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


4
Un demi-correctif parce que si vous ne voulez pas mettre tous ces CSS chez le fournisseur, que devez-vous faire? Minimisez node_modules à chaque fois que vous testez votre application? Doh ... Avez-vous trouvé quelque chose pour simplement compiler un certain module?
SteamFire

1
Dans mon processus de compilation, le fichier fournisseur est créé uniquement lors de la construction, puis je surveille simplement les modifications sur les fichiers sur lesquels je travaille réellement (ce qui n'est généralement rien qui entre dans le fournisseur). Cela signifie que la première version est un peu plus lente, mais ensuite je compile juste mes fichiers sans minification, ce qui ne ralentit pas le processus pour moi
Nick

3
J'ai rencontré ce même problème et j'ai constaté que j'essayais de charger une version réduite du fichier qui était présent sur le serveur en tant que fichier non réduit. Donc, j'essayais de charger "custom-style.min.css" lorsque le fichier sur le serveur était "custom-style.css". Une fois que j'ai changé mon lien pour charger la bonne ressource, tout a bien fonctionné.
Programmeur Dan

Le problème n'est pas limité au CSS. J'ai également obtenu un 404 sur un fichier JS qui a été causé par un commentaire sur la première ligne.
noir

80

Cette erreur peut également survenir lorsque vous ne faites pas correctement référence à 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 les secondes), il y a de fortes chances que vous voyiez cette erreur.


4
Exactement ce qui m'est arrivé. J'ai essayé toutes les réponses ici (changez le mimetype, supprimez les commentaires CSS, changez la configuration node.js ...). Tout ce que j'avais à faire était de corriger une faute de frappe dans le nom CSS. Ah!
AJPerez

5
Pour ajouter à cette réponse, assurez-vous que gulp a effectivement trouvé le fichier css et l'a canalisé dans votre dist. Chaque fois que j'obtiens cette erreur, c'est parce que j'ai foiré mon chemin vers les fichiers css d'une manière ou d'une autre et qu'il n'existe tout simplement pas dans le répertoire de construction.
LAdams87

5
Oui, même pour moi, une faute de frappe simple et stupide. Je pense que cela fait que le serveur envoie une page de réponse 404, donc votre navigateur obtient cette page 404 et vous dit que ce n'est pas le bon CSS ... ce qui est vrai.
tanou

62

Dans la plupart des cas, cela peut simplement être dû au fait que le chemin du fichier CSS est incorrect . Ainsi, le serveur Web revient status: 404avec une certaine Not Foundcharge utile de contenu de htmltype.

Le navigateur suit ce (mauvais) chemin depuis la <link rel="stylesheet" ...>balise avec l'intention d'appliquer des styles CSS. Mais le type de contenu retourné se contredit pour qu'il enregistre une erreur.

Entrez la description de l'image ici


Mon problème était que le chemin n'était pas valide. Mais, ce mauvais chemin a été causé par le href de base défini pour mon projet angulaire étant incorrect. Si quelqu'un d'autre a commencé à voir cette erreur après avoir mis à jour votre référence href, cela peut être la cause.
Krejko

1
Merci d'avoir pris la peine de documenter pleinement et clairement comment une erreur 404 sur le fichier CSS peut produire ce message d'erreur (initialement) déroutant
Velojet

1
une autre façon de dépanner, collez l'URL sur laquelle vous obtenez cette erreur dans un autre onglet, si vous ne voyez pas CSS, c'est probablement le problème
BlackICE

Que vous pour votre indice
Jason Zhou

52

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

Entrez la description de l'image ici


23
Pourquoi ça marche? L'erreur indique que "text / html" n'est pas un type MIME pris en charge.
James Bateson

6
Dans mon cas, l'erreur a disparu, les styles css, cependant, ne sont pas appliqués ..: /
Andru

2
J'ai passé un peu plus de temps à lire sur ce problème et à changer le type d'un fichier css ibto quelque chose d'autre peut provoquer de graves problèmes, comme css lu en html par le serveur
Nick

Dans AngularDart, la racine de index.html est le dossier «web» et non le dossier principal du projet. Tous les fichiers css doivent donc se trouver dans le dossier web. Comme ceci "[dossier de projets] \ web [vos fichiersfichiersici]". Donc, si vous essayez d'importer un fichier CSS situé en dehors du dossier Web, il ne sera pas trouvé.
Wael

40

J'ai eu cette erreur pour un modèle Bootstrap.

<link href="starter-template.css" rel="stylesheet">

Ensuite, j'ai supprimé rel="stylesheet"le lien, c'est-à-dire:

<link href="starter-template.css">

Et tout fonctionne bien. Essayez ceci si vous utilisez des modèles Bootstrap.


3
Bonne prise. L'erreur a disparu maintenant.
Rich

1
Selon le standard de vie (4.2.4) , "Un élément de lien doit avoir soit un attribut rel soit un attribut itemprop, mais pas les deux." Ainsi, la suppression de l' relattribut supprime simplement la fonctionnalité d'inclusion d'une feuille de style.
Artjom B.

cela a étrangement fonctionné pour moi.

35

J'ai changé mon 'href' -> 'src'. Donc à partir de là:

<link rel="stylesheet" href="dist/photoswipe.css">

pour ça:

<link rel="stylesheet" src="dist/photoswipe.css">

Ça a marché. Je ne sais pas pourquoi, mais ça a fait l'affaire.


1
Bien que cela ait fonctionné pour moi aussi, est-ce un attribut valide?
sr9yar

1
@ sr9yar Vous avez raison, selon le validator.w3.org, il n'est pas valide d'avoir src dans le lien, donc c'est bien comme un correctif rapide, mais dès que vous avez un peu plus de temps, je suggère d'en trouver un autre plus solution de contournement valide.
Sebastian Voráč

20

Les commentaires dans votre fichier déclencheront cela. Certains minificateurs ne suppriment pas les commentaires.

AUSSI

Si vous utilisez Node.js et définissez vos fichiers statiques en utilisant expresspar exemple:

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

Vous devez correctement adresser les fichiers.

Dans mon cas, les deux étaient le problème, j'ai donc préfixé mes liens CSS avec "/css/styles.css".

Exemple:

<link type="text/css" rel="stylesheet" href='/css/styles.css">

Cette solution est parfaite car le chemin est le principal problème pour que CSS ne reçoive pas le rendu


18

J'ai simplement référencé le fichier CSS (un thème angulaire dans mon cas) dans la section des styles de ma configuration de construction Angular 6 dans angular.json:

Entrez la description de l'image ici

Cela ne répond pas à la question, mais cela pourrait être une solution de contournement appropriée, comme c'était le cas pour moi.


3
C'est la bonne réponse pour les projets Angular-CLI 6
Torsten Barthel

14

Comme mentionné dans ce post, certaines des solutions ont fonctionné pour moi, mais CSS ne s'applique pas sur la page.

Simplement, je viens de déplacer le répertoire "css" dans le répertoire "Assest /" et tout fonctionne bien.

<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/css/site.css" >

Génial (Y) a résolu mon problème
Chakri

12

Pour les autres utilisateurs utilisant Angular-CLI et publiant dans un sous-dossier sur le serveur Web, vérifiez cette réponse:

Lorsque vous déployez sur un chemin non root dans un domaine, vous devrez mettre à jour manuellement la <base href="https://stackoverflow.com/">balise dans votredist/index.html.

Dans ce cas, vous devrez mettre à jour <base href="https://stackoverflow.com/sub-folder/">

https://github.com/angular/angular-cli/issues/1080


10

Mon problème est que j'utilisais le webpack et dans mon lien CSS HTML j'avais un chemin relatif, et chaque fois que je naviguais vers une page imbriquée, cela se résoudrait au mauvais chemin:

<link rel="stylesheet" href='./index.css'>

de sorte que la solution simple était de supprimer le .car le mien est une application d' une seule page .

Comme ça:

<link rel="stylesheet" href='/index.css'>

il résout donc toujours /index.css


Oui, dans mon cas, j'ai oublié de supprimer ces chemins relatifs de mon fichier index.html et exécutais webpack en mode production. Ces chemins ne sont pas nécessaires car le webpack relie dynamiquement les fichiers css via le webpack.prod.js.
Kewal Shah

10

J'ai eu ce problème avec un site que je savais fonctionner en ligne lorsque je l'ai déplacé vers localhost et PhpStorm.

Cela a bien fonctionné en ligne:

    <link rel="stylesheet" href="/css/additional.css">

Mais pour localhost, je devais me débarrasser de la barre oblique:

    <link rel="stylesheet" href="css/additional.css">

Je renforce donc déjà quelques réponses fournies ici - il s'agit probablement d'un chemin ou d'une faute d'orthographe plutôt que d'un problème de configuration de serveur compliqué. L'erreur dans la console est un hareng rouge; l'onglet réseau doit d'abord être vérifié pour le 404.

Parmi les réponses fournies ici figurent quelques solutions qui ne sont pas correctes. L'ajout type="text/html"ou la modification hrefdesrc n'est pas la réponse.

Si vous voulez avoir tous les attributs pour qu'il valide sur les validateurs les plus difficiles et sur votre IDE, la valeur du média doit être fournie et reldoit l'être stylesheet, par exemple:

    <link rel="stylesheet" href="css/additional.css" type="text/css" media="all">

10

Je sais que cela peut être hors contexte, mais la liaison d'un fichier inexistant peut provoquer ce problème comme cela m'est déjà arrivé auparavant.

<!-- bootstrap grid -->
<link rel="stylesheet" href="./css/bootstrap-grid.css" />

Si ce fichier n'existe pas, vous serez confronté à ce problème.


8

J'ai eu le même problème.

Si la structure de votre projet ressemble à l'arborescence suivante:

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

Je recommande d'ajouter le morceau de code suivant dans server.js:

var path = require('path')
var express = require('express')
var app = express()

app.use('/assets', express.static(path.join(__dirname, "../assets")));

Remarque: Path est un module Node.js intégré, il n'a donc pas besoin d'installer ce package via npm.


7

En plus d'une longue liste de réponses, ce problème m'est également arrivé parce que je ne savais pas que le chemin était incorrect du point de vue de la synchronisation du navigateur.

Compte tenu de cette structure de dossiers simple:

package.json
app
  |-index.html
  |-styles
      |-style.css

l' hrefintérieur de l' attribut <link>dans index.htmldoit être app/styles/style.csset nonstyles/style.css


En effet, juste une faute de frappe dans le chemin m'a donné cette même erreur.
Julesezaar

wow cela a fonctionné pour moi, merci beaucoup. J'étais littéralement sur le point d'abandonner
Vash

7

Vous pouvez ouvrir les outils Google Chrome, sélectionner l'onglet réseau, recharger votre page et trouver la demande de fichier du CSS et chercher ce qu'il a à l'intérieur du fichier.

Peut-être que vous avez fait quelque chose de mal lorsque vous avez fusionné les deux bibliothèques dans votre fichier, y compris certains caractères ou en-têtes qui ne sont pas correctement pour CSS?


1
malheureusement, je l'ai essayé mais cela n'aide pas vraiment, la demande échoue instantanément et il n'a que l'url de la demande (ce qui est correct)
Nick

6

Si vous utilisez Express sans JS, essayez avec:

app.use(express.static('public'));

Par exemple, mon fichier CSS est à public/stylesheets/app.css


5

Pour une application Node.js, utilisez-la simplement après avoir importé tous les modules requis dans votre fichier serveur:

app.use(express.static("."));
  • Fonction middleware intégrée express.static dans Express et ceci dans votre fichier .html: <link rel="stylesheet" href="style.css">

3
Vous ne voulez pas vraiment servir votre code serveur au public, n'est-ce pas?
Ki Jéy

5

J'ai eu le même problème et j'ai vérifié que j'avais écrit:

<base href="./"> dans index.html

Puis j'ai changé pour

<base href="/">

Et puis ça a bien fonctionné.


4

Supprimez rel = "feuille de style" et ajoutez type = "text / html". Donc, cela ressemblera à ceci -

<link  href="styles.css" type="text/html" />

Enfin une réponse qui a fonctionné pour moi. Je vous remercie!
Richard Witherspoon

4

Dans mon cas, lorsque je déployais le package en direct, je l'avais sorti du dossier HTML public. C'était pour une raison.

Mais apparemment, une vérification stricte du type MIME a été activée, et je ne sais pas trop si c'est de mon côté ou de la société avec laquelle j'héberge.

Mais dès que j'ai déplacé le dossier de style dans le même répertoire que le fichier index.php, j'ai cessé de recevoir l'erreur et le style a été parfaitement activé.


4

Les styles d'amorçage ne se chargent pas # 3411

https://github.com/angular/angular-cli/issues/3411

  1. J'ai installé Bootstrap v. 3.3.7

    npm install bootstrap --save
  2. Ensuite, j'ai ajouté les fichiers de script nécessaires apps[0].scriptsdans le fichier angular-cli.json:

    "scripts": [
        "../node_modules/bootstrap/dist/js/bootstrap.js"
    ],
    
    // And the Bootstrap CSS to the apps[0].styles array
    
    "styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.css"
    ],
  3. J'ai redémarré le service

Ça a marché pour moi.


4

Si le navigateur ne peut pas trouver le fichier CSS associé, il pourrait donner cette erreur.

Si vous utilisez une application angulaire, vous n'avez pas besoin de mettre le chemin du fichier css sur index.html

 <link href="xxx.css" rel="stylesheet"> -->

Vous pouvez mettre le chemin du fichier css associé dans le fichier styles.css.

@import "../node_modules/material-design-icons-iconfont/dist/material-design-icons.css";

C'était le correctif pour moi, supprimez le lien href de index.html et utilisiez la méthode d'importation dans les styles.scss.
IronWorkshop

3

L'une des principales raisons du problème est que le fichier CSS qui essaie de charger n'est pas un fichier CSS valide.

Causes:

  • Type MIME non valide
  • Avoir du code JavaScript dans la feuille de style - (peut se produire en raison d'une configuration incorrecte du bundle Webpack)

Vérifiez que le fichier que vous essayez de charger est une feuille de style CSS valide (récupérez l'URL du serveur du fichier dans l'onglet réseau et cliquez sur un nouvel onglet et vérifiez).

Informations utiles à prendre en compte lors de l'utilisation de <link> dans la balise body.

Bien qu'avoir une linkétiquette à l'intérieur du corps ne soit pas la manière standard d'utiliser l'étiquette. Mais nous pouvons l'utiliser pour l'optimisation de page (plus d'informations: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery ) / si le cas d'utilisation de l'entreprise l'exige (lorsque vous servez le corps du contenu et le serveur configuré pour rendre la page HTML avec le contenu fourni).

Tout en restant à l'intérieur de la balise body, nous devons ajouter l'attribut itemPropertydans la linkbalise comme

<body>
    <!--  -->
      <link itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye" />
    <!--  -->
</body>`

Pour plus d'informations sur itemPropertyconsultez /webmasters/55130/can-i-use-link-tags-in-the-body-of-an-html-document .


3

en allant dans la console de mon navigateur> réseau> style.css ... cliqué dessus et il a montré "ne peut pas obtenir / chemin / vers / mon / CSS", cela m'a dit que mon lien était faux. j'ai changé cela pour le chemin de mon fichier CSS.

Le chemin d'origine avant le changement était localhost: 3000 / Example / public / style.css le changer en localhost: 3000 / style.css l'a résolu.

si vous servez le fichier depuis app.use (express.static (path.join (__ dirname, "public"))); ou app.use (express.static ("public")); votre serveur transmettrait "ce dossier" au navigateur, l'ajout d'un lien "/yourCssName.css" dans votre navigateur le résout

En ajoutant d'autres itinéraires dans le lien CSS de votre navigateur, vous diriez au navigateur de rechercher le CSS dans l'itinéraire spécifié.

en résumé ... vérifiez où pointe le lien CSS de votre navigateur.


2

Si vous définissez des styles en JavaScript comme:

    var cssLink = document.createElement("link");
    cssLink.href = "./content.component.scss";
    cssLink.rel = "stylesheet";
   --> cssLink.type = "html/css";
    (iframe as HTMLIFrameElement).contentDocument.head.appendChild(cssLink);

Ensuite, changez simplement cssLint.type (indiqué par la flèche dans la description ci-dessus) en "MIME":

   cssLink.type = "MIME";

Cela vous aidera à vous débarrasser de l'erreur.


2

Ce problème se produit lorsque vous utilisez l'outil cli pour reactjs ou angular, donc la clé est de copier l'intégralité de la version finale de ces outils car ils initialisent ce sont leurs propres serveurs lite, ce qui confond vos URL avec le serveur principal que vous avez créé ... prenez tout ce dossier de compilation et videz-le sur le dossier des ressources de votre projet de serveur principal et référez-les à partir de votre serveur principal et non du serveur livré avec Angular ou Reactjs Sinon, vous l'utilisez comme frontal d'un certain Serveur API


2

J'ai rencontré ce problème avec le même problème lors de l'ajout d'une apparence personnalisée à un flux utilisateur Azure B2C. Ce que j'ai trouvé, c'est que la racine à laquelle la page html faisait référence était ../oauth/v2 (c'est-à-dire le chemin du serveur oauth) plutôt que le chemin vers mon espace de stockage.

Mettre l'URL complète des pages a résolu le problème pour moi.


2

Vérifiez si la compression est activée ou désactivée. Si vous l'utilisez ou si quelqu'un l'a activé, cela app.use(express.static(xxx))n'aidera pas. Assurez-vous que votre serveur autorise la compression.

J'ai commencé à voir l'erreur similaire lorsque j'ai ajouté des plugins Brotli et de compression à mon Webpack. Ensuite, votre serveur doit également prendre en charge ce type de compression de contenu.

Si vous utilisez Express, les éléments suivants devraient vous aider:

app.use(url, expressStaticGzip(dir, gzipOptions)

Le module s'appelle: express-static-gzip

Mes paramètres sont:

const gzipOptions = {
  enableBrotli: true,
  customCompressions: [{
  encodingName: 'deflate',
  fileExtension: 'zz'
 }],
 orderPreference: ['br']
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.