Feuille de style non chargée à cause du type MIME
Je travaille sur un site Web qui utilise gulp pour compiler et synchroniser le navigateur afin que le navigateur reste synchronisé avec mes modifications.
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 ' car il s'agit de Le 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 ceci (ce dont je suis presque 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 les styles bootstrap et font-awesome (pour l'instant rien de personnalisé).
Le chemin est également correct, car il s’agit de la structure du dossier:
index.html
assets
|-styles
|-custom-style.css
Mais je continue à avoir l'erreur.
Avez-vous des idées de ce que ça pourrait être? Est-ce que c'est quelque chose (peut-être un paramètre?) Pour gulp/browsersync peut-être?
Toute aide est vraiment appréciée, et n'hésitez pas à demander plus de détails si nécessaire.
Merci
Ok, je pense avoir trouvé une solution et je l'écris ici pour aider quelqu'un d'autre.
Le problème, je pense que c’était avec une bibliothèque CSS commençant par des commentaires . Alors que sur dev, je ne minifie pas les fichiers et je ne supprime pas les commentaires, cela signifie que la feuille de style a commencé avec quelques quelque chose de différent de css.
Le fait de supprimer la bibliothèque et de le placer dans le fichier du fournisseur (qui est TOUJOURS minifié sans commentaires) a résolu le problème.
Encore une fois, je ne suis pas sûr à 100% que ce soit une solution, mais cela reste une victoire pour moi car cela fonctionne comme prévu maintenant.
make a folder just below/above style.css file selon la structure angulaire et fournir un lien comme <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
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 s'appelle style.css (sans les secondes), alors il y a de bonnes chances que vous voyiez cette erreur.
Dans la plupart des cas, il peut s'agir simplement que le chemin du fichier CSS soit incorrect. Le serveur Web renvoie donc status: 404 avec une charge utile Not Found contenu de type html.
Le navigateur suit ce chemin (incorrect) de la balise <link rel="stylesheet" ...> avec l'intention d'appliquer des styles CSS. Mais le type de contenu renvoyé est en contradiction, de sorte qu'il enregistre une erreur.
J'ai eu cette erreur pour un modèle de bootstrap.
<link href="starter-template.css" rel="stylesheet">
Ensuite, j'ai supprimé le rel="stylesheet" du lien, à savoir:
<link href="starter-template.css">
Et tout fonctionne bien. Essayez ceci si vous utilisez des modèles Bootsrap.
J'ai simplement référencé le fichier css (un thème angulaire dans mon cas) dans la section styles de ma configuration de construction angulaire 6 dans angular.json
Cela ne répond pas à la question, mais pourrait constituer une solution de contournement appropriée, comme ce fut le cas pour moi . J'espère que cela aidera.
J'ai changé mon 'href' -> 'src'. Donc de ceci:
<link rel="stylesheet" href="dist/photoswipe.css">
pour ça:
<link rel="stylesheet" src="dist/photoswipe.css">
3 heures ici et cela a fonctionné, pourquoi pas maintenant mais ça a fait le travail.
Les commentaires dans votre fichier vont déclencher cela. Certains minifiers ne supprimeront pas les commentaires.
&EACUTE;GALEMENT
Si vous utilisez NodeJS et définissez vos fichiers statiques à l’aide de Express, tels que:
app.use(express.static(__dirname + '/public'));
Vous devez adresser correctement les fichiers.
Dans mon cas, le problème était lié aux deux; j'ai donc préfixé mes liens CSS à "/css/styles.css"
Exemple:
<link type="text/css" rel="stylesheet" href='/css/styles.css">
Pour les autres utilisateurs de angular-cli et de la publication dans un sous-dossier du serveur Web, cochez cette réponse:
Lorsque vous déployez un chemin non-racine dans un domaine, vous devez mettre à jour manuellement la balise <base href="/"> dans votre dist/index.html..
Dans ce cas, vous devrez mettre à jour à <base href="/sub-folder/">
Comme mentionné dans les solutions de ce post, certaines solutions fonctionnent pour moi, mais CSS ne s'applique pas à la page.
Simplement, je viens de déplacer le répertoire "css" dans le répertoire "Assest /" et tout fonctionne correctement.
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/css/site.css" >
mon problème est que j'utilisais webpack et que dans mon lien html css, j'avais un chemin relatif, et à chaque fois que je naviguais vers une page imbriquée, le problème était résolu:
<link rel="stylesheet" href='./index.css'>
la solution la plus simple était donc de supprimer le . car le mien est une application à page unique… comme ceci:
<link rel="stylesheet" href='/index.css'>
il se résout toujours à /index.css
Je reçois le même problème, puis j'ai vérifié, j'ai écrit
<base href="./"> dans index.html
Puis j'ai changé pour
<base href="/">
alors ça marche bien
Pour l'application Node.js. Utilisez-le après avoir importé tous les mudules nécessaires dans votre fichier serveur:
app.use(express.static("."));
- fonction middleware intégrée dans express.static dans Express et ceci dans votre fichier .html: <
link rel="stylesheet" href="style.css">
Vous pouvez ouvrir les outils de chrome, sélectionner l'onglet Réseau, recharger votre page, trouver la demande de fichier du fichier css et chercher ce qu'elle contient dans le fichier. Peut-être avez-vous commis une erreur en fusionnant les deux bibliothèques de votre fichier, y compris des caractères ou des en-têtes ne convenant pas à la css?
Dans mon cas, lorsque je déployais le paquet en direct, je l'avais sorti du dossier HTML public, c'était pour une raison.
Mais apparemment, le contrôle de type mime strict a été activé, je ne suis pas trop sûr que ce soit de mon côté ou de la part 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é.
Une des raisons principales du problème, le fichier CSS qui essaie de charger n'est pas un fichier CSS valide___. causes:- invalid MIME type, having Javascript code inside style sheet- (peut se produire en raison d'une config de Webpack Bundler incorrecte)
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 à partir de l'onglet Réseau et tapez dans un nouvel onglet et vérifiez)
Useful info à prendre en compte lors de l'utilisation d'une balise body interne.
Bien que la balise link à l'intérieur du corps ne soit pas la méthode standard pour utiliser la balise. mais nous pouvons l'utiliser pour l'optimisation de la page (plus d'infos: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery )/si le cas d'utilisation commerciale l'exige (lorsque vous servez le corps du contenu et le serveur configuré pour rendre la page HTML avec le contenu fourni).
Tout en conservant l'intérieur de la balise body, nous devons ajouter l'attribut itemProperty dans la balise link comme <body>
<!-- … -->
<link itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye" />
<!-- … -->
</body>
plus d'informations sur itemProperty consultez: https://webmasters.stackexchange.com/questions/55130/can-i-use-link-tags-in-the-body-of-an-html-document
J'ai eu le même problème. si la structure de votre projet ressemble à l’arborescence suivante, je vous recommande de procéder comme suit:
index.html
assets
|-styles
|-custom-style.css
server
|- server.js
Dans server.js, ajoutez ce code:
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 intégré dans Node.JS, il n’a donc pas besoin d’installer ce paquetage via npm.
Ajoutant à une longue liste de réponses, ce problème m’était aussi arrivé parce que je n’avais pas réalisé que le chemin était mauvais du point de vue de la synchronisation du navigateur.
Étant donné cette structure de dossier simple:
package.json
app
|-index.html
|-styles
|-style.css
l'attribut href à l'intérieur de <link> dans index.html doit être app/styles/style.css et non styles/style.css
Si vous définissez les 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 une flèche dans la description ci-dessus). à "MIME"
cssLink.type = "MIME";
Vous aidera à vous débarrasser de l'erreur
J'ai rencontré ce problème qui rencontrait le même problème en ajoutant une apparence personnalisée à un flux d'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 de mon serveur de stockage.
Mettre dans l’URL complète des pages corrigeait le problème pour moi.
Vérifiez trois fois le nom et le chemin du fichier. Dans mon cas, j'avais quelque chose comme ce contenu dans le dossier cible:
lib
foobar.bundle.js
foobr.css
Et ce lien:
<link rel="stylesheet" href="lib/foobar.css">
Je suppose que le navigateur essayait de charger le fichier js et se plaignait de son type mime au lieu de me donner une erreur de fichier introuvable.
J'ai eu le même problème et après des heures de débogage, j'ai découvert qu'il était lié à des fichiers temporaires ne pouvant pas être écrits . Allez à admin> config> Système de fichiers . Définissez le bon répertoire temporaire. Assurez-vous que votre serveur est autorisé à écrire dans ce répertoire.
J'ai eu cette erreur, en angulaire. J'ai résolu le problème en mettant un ngIf sur mon élément de lien afin qu'il n'apparaisse pas dans le Dom jusqu'à ce que mon URL dynamique soit renseignée.
Peut-être un peu en relation avec OP mais je me suis retrouvé ici à chercher une réponse
<link *ngIf="cssUrl" rel="stylesheet" type="text/css" [href]="sanitizer.bypassSecurityTrustResourceUrl(cssUrl)">
la solution de ce thread résolu mon problème
Je ne sais pas si cela aidera quelqu'un, mais si vous utilisez angular-cli, j'ai résolu ce problème en supprimant la référence CSS de mon index.html et en l'ajoutant au fichier angular-cli.json dans la partie "style" . Après avoir redémarré mon serveur Web, je n’avais plus ce problème.
si vous utilisez express sans JS, écrivez simplement: app.use (express.static ('public'));
mon fichier css est au public -> stylesheets-> app.css
Vérifiez si une compression est activée ou désactivée. Si vous l'utilisez ou si quelqu'un l'active, alors app.use(express.static(xxx)) ne vous aidera pas. Assurez-vous que votre serveur autorise la compression.
J'ai commencé à voir l'erreur similaire lorsque j'ai ajouté Brotli et Compression Plugins à mon Webpack. Ensuite, votre serveur doit également prendre en charge ce type de compression de contenu.
Si vous utilisez Express, voici ce qui devrait 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']
}
Supprimez rel = "stylesheet" et ajoutez le type = "text/html". Donc, ça va ressembler à ceci -
<link href="styles.css" type="text/html" />
J'ai rencontré ce problème. - Refuse d'appliquer le style de ' http://m.b2b-v2-pre1.jcloudec.com/mobile-dynamic-load-component-view/resource/js/resource/js/need/layer.css?2.0 'car son 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. Changer le chemin pourrait résoudre ce problème.
J'ai eu ce problème avec un site que je savais qui fonctionnait 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'agira probablement d'une erreur de chemin ou d'une faute d'orthographe plutôt que d'un problème compliqué d'installation du serveur. L'erreur dans la console est une erreur rouge, il faut d'abord vérifier l'onglet réseau pour le 404.
Parmi les réponses fournies, voici quelques solutions qui ne sont pas correctes. L'ajout de type="text/html" ou le changement de href en src n'est pas la solution.
Si vous souhaitez que tous les attributs soient validés sur le valideur le plus sélectif et votre IDE, la valeur du média doit être fournie et la variable rel doit être stylesheet, par exemple:
<link rel="stylesheet" href="css/additional.css" type="text/css" media="all">
Ce problème survient lorsque vous utilisez l'outil cli pour les réactions ou les angles. Il est donc essentiel de copier l'intégralité de la version finale à partir de ces outils, car ils initialisent leurs propres serveurs lite, ce qui confond vos URL avec le serveur principal que vous avez créé. ... prenez tout ce dossier de construction et déposez-le dans le dossier de ressources de votre projet de serveur d'arrière-plan 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 essayé de redémarrer ma machine Windows et j'ai réinstallé le "npm i".
Cela a fonctionné pour moi.
Styles de démarrage non chargés # 3411
https://github.com/angular/angular-cli/issues/3411
J'ai installé Bootstrap v. 3.3.7
npm install bootstrap --saveEnsuite, 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" ],J'ai recommencé à servir
Cela a fonctionné pour moi.
Vous avez peut-être un problème d'autorisation, Buddy:
Essayez ces étapes:
- Allez à ISS -> trouvez votre projet dans la liste -> Cliquez dessus -> Cliquez sur Modifier les autorisations dans le volet de droite sous actions
- vous verrez l'assistant des propriétés de votre projet. Cliquez sur les valeurs
- Sous Groupes ou noms d'utilisateur -> Si vous voyez "Utilisateurs authentifiés", vous êtes autorisé, sinon vous devez le faire.
- Une fois que vous l'aurez ajouté (vous-même ou avec l'aide de votre administrateur si vous travaillez dans une entreprise :)), le site Web commencera à charger des ressources. Vous devrez peut-être redémarrer votre projet sous ISS.
Merci
Réenregistrer un fichier .ts (forçant Ionic à reconstruire) l’a résolu pour moi.
Cela n'a pas vraiment de sens ... mais tant que ça marche, qui dois-je en juger?
Ici, j'ai vu cette solution de contournement: ionic/angular2 - Refuse d'appliquer le style à partir de 'http: // localhost: 8100/build/main.css' car son type MIME ('text/html ') n'est pas supporté
J'ai eu le même problème, et dans mon cas, cela était dû au fait que j'avais manuellement essayé d'importer des fichiers CSS dans le fichier HTML (comme nous le faisons toujours avec des sites Web statiques), alors importé dans le fichier JS de point d’entrée utilisé par webpack.
Lorsque les feuilles de style ont été importées dans le fichier JS principal, au lieu d'être écrites manuellement au format HTML, tout s'est déroulé comme prévu.
Une autre raison de cette erreur peut être que les autorisations de fichier CSS sont incorrectes. Dans mon cas, le fichier était inaccessible car la propriété avait été changée en utilisateur root, ce qui était dû à la poussée des fichiers Git en tant qu'utilisateur root.