wake-up-neo.com

Stylesheet wird nicht geladen, da der MIME-Typ text/html ist

Beim Ausführen einer MERN-App auf Firefox wurde dieser Fehler in der Browserkonsole angezeigt, und css wird nicht geladen: The stylesheet http://localhost:3000/src/css/component.css was not loaded because its MIME type, “text/html”, is not “text/css”

Ich füge CSS zu index.html folgendermaßen hinzu:

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

Wohin gehe ich falsch?

Was sind die anderen Möglichkeiten, externe CSS für Abschnitte neben den React-Komponenten hinzuzufügen?

Code ist hier

8
Shubham

Das Stylesheet http: // localhost: 3000/src/css/component.css war nicht geladen, da der MIME-Typ "text/html" nicht "text/css" ist

Grund für den Fehler ist, 

sie dürfen nur auf das öffentliche Verzeichnis zugreifen, wenn es im Browser bereitgestellt wird

-> Zuerst ../src/css/ Auf diese Weise können Sie nicht auf die Datei zugreifen. Diese wird als Route betrachtet und versucht, HTML zu geben

-> Zweitens: Dies ist nicht der richtige Weg, um CSS-Dateien einzubinden:

<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 Art und Weise der Verwendung der CSS-Datei ist wie folgt (aus Ihrer js-Datei der reagierten Komponente):

import './css/component.css';

(react-scripts start) React konvertiert Ihre CSS-Datei automatisch in js und wendet sie an.


Wenn Sie CSS-Dateien außerhalb von Rea verwenden möchten, müssen Sie alle CSS-Dateien im öffentlichen Ordner ablegen (gut für 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" />

Wenn Sie noch Zweifel haben, lesen Sie bitte:

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

Hoffe, das wird alle deine Zweifel klären.

11
Vivek Doshi

Ich habe den Ordner css und js in das öffentliche Verzeichnis verschoben und den component.css als referenziert

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

Es hat für mich funktioniert ..

Gibt es einen besseren Weg?

0
Shubham

Ich benutze MiniCssExtractPlugin und habe das fehlende ' bemerkt. 'wird unter Problem verursacht.

von

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

zu

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

//correct way should be like this

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

Hoffe das hilft dir.

0
Sherman Lye

Sie müssen überprüfen, ob die Datei auf dem Server vorhanden ist. Ich habe den Grund dafür gefunden, da beim Hochladen des Quellcodes auf den Server keine Datei vorhanden ist (oder fehlt). Wenn also die CSS-Datei nicht gefunden wird, gibt der Server HTML MIME zurück Art

0
VnDevil