web-dev-qa-db-fra.com

La feuille de style ne se charge pas car le type MIME est text/html

Lors de l'exécution d'une application MERN sur firefox, cette erreur s'est produite dans la console du navigateur et les fichiers CSS ne sont pas chargés: The stylesheet http://localhost:3000/src/css/component.css was not loaded because its MIME type, “text/html”, is not “text/css”

J'ajoute CSS à index.html comme ceci:

 <link rel="stylesheet" type="text/css" href="../src/css/component.css" />

Où vais-je mal?

Quels sont les autres moyens d'ajouter des CSS externes pour les sections autres que les composants React?

Le code est ici

javascriptcssnode.jsreactjsmime-types
8
Shubham

La feuille de style http: // localhost: 3000/src/css/composant.css n'était pas chargé parce que son type MIME, "text/html", n'est pas "text/css"

La raison de l'erreur est, 

vous êtes autorisé à accéder uniquement au répertoire public quand il est diffusé sur le navigateur,

-> First ../src/css/ de cette façon, vous ne pouvez pas accéder au fichier, il considérera cela comme une route et essaiera de vous donner le code HTML.

-> Deuxièmement, ce n'est pas la bonne façon d'inclure des fichiers CSS:

<link rel="stylesheet" type="text/css" href="../src/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="../src/css/demo.css" />
<link rel="stylesheet" type="text/css" href="../src/css/component.css" />

Porper utilise le fichier css comme ceci (à partir de votre fichier js de composant de réaction):

import './css/component.css';

(react-scripts start) React convertira automatiquement votre fichier css en js et l'appliquera.

Néanmoins, si vous souhaitez utiliser des fichiers css en dehors de Rea, vous devez placer tous les fichiers css dans un dossier public (il est bon de le placer dans public/css).

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />

Si vous avez encore des doutes, veuillez lire:

https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started

J'espère que cela effacera tous vos doutes.

11
Vivek Doshi

J'ai déplacé le dossier css et js dans le répertoire public et référencé le component.css par

<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/component.css" />

Cela a fonctionné pour moi ..

Une meilleure façon ??

0
Shubham

J'utilise MiniCssExtractPlugin et j'ai réalisé qu'il manquait '. 'sera causé ci-dessous problème.

de

filename: '/style.[contenthash].css'

à

filename: './style.[contenthash].css'


//correct way should be like this

new MiniCssExtractPlugin({
  publicPath: './sass/',
  filename: './style.[contenthash].css'
});

J'espère que cela vous aidera.

0
Sherman Lye

Vous devez vérifier que le fichier existe sur le serveur . J'ai trouvé la raison, car il n'y a aucun fichier (ou manquant) lors du téléchargement du code source sur le serveur . Ainsi, lorsque le fichier css est introuvable, le serveur renvoie html MIME type

0
VnDevil