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

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?

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".

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.

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.

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.

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">.

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.

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.

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

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:

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

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" >

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

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

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">

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.

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.

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

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?

Si vous utilisez Express sans JS, essayez avec:

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

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

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">

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é.

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

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

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é.

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.

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";

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 .

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.

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.

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

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.

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']
}