Stylesheet wegen MIME-Typ nicht geladen

Ich arbeite an einer Website, die gulpzum Kompilieren und Synchronisieren des Browsers verwendet wird, um den Browser mit meinen Änderungen zu synchronisieren.

Die gulp-Aufgabe kompiliert alles richtig, aber auf der Website kann ich keinen Stil sehen, und die Konsole zeigt diese Fehlermeldung an:

Die Anwendung des Stils von ' http: // localhost: 3000 / assets / styles / custom-style.css ' wurde abgelehnt , da der MIME-Typ ('text / html') kein unterstützter MIME-Typ für Stylesheets ist und die strikte MIME-Prüfung aktiviert ist.

Jetzt verstehe ich nicht wirklich, warum das passiert.

Der HTML-Code enthält die folgende Datei (von der ich mir ziemlich sicher bin, dass sie korrekt ist):

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

Und das Stylesheet ist eine Mischung aus Bootstrap- und Font-fantastischen Styles (noch nichts Benutzerdefiniertes).

Der Pfad ist ebenfalls korrekt, da dies die Ordnerstruktur ist:

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

Aber ich bekomme immer wieder den Fehler.

Was könnte es sein? Ist das etwas (vielleicht eine Einstellung?) Für gulp / browserersync vielleicht?

Überprüfen Sie für Node.js-Anwendungen Ihre Konfiguration:

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

Beachten Sie, dass /publicam Ende kein Schrägstrich vorhanden ist. Sie müssen ihn daher in Ihre href-Option Ihres HTML-Codes aufnehmen:

href="/css/style.css">

Wenn Sie einen Schrägstrich ( /public/) eingefügt haben, können Sie dies einfach tun href="css/style.css".

Ich denke, das Problem war eine CSS-Bibliothek, die mit Kommentaren begann.

Während der Entwicklung minimiere ich keine Dateien und entferne keine Kommentare. Dies bedeutete, dass das Stylesheet mit einigen Kommentaren begann, was dazu führte, dass es als etwas anderes als CSS angesehen wurde.

Durch Entfernen der Bibliothek und Einfügen in eine Herstellerdatei (die IMMER ohne Kommentare minimiert wird) wurde das Problem behoben.

Auch hier bin ich mir nicht 100% sicher, ob dies eine Lösung ist, aber es ist immer noch ein Gewinn für mich, da es jetzt wie erwartet funktioniert.

Dieser Fehler kann auch auftreten, wenn Sie nicht ordnungsgemäß auf Ihre CSS-Datei verweisen.

Zum Beispiel, wenn Ihr Link-Tag ist

<link rel="stylesheet" href="styles.css">

Wenn Ihre CSS-Datei jedoch den Namen style.css(ohne das zweite s) trägt, besteht eine gute Chance, dass dieser Fehler angezeigt wird.

In den meisten Fällen kann dies einfach daran liegen, dass der CSS-Dateipfad falsch ist . Der Webserver kehrt also status: 404mit einer Not FoundInhaltsnutzlast vom htmlTyp zurück.

Der Browser folgt diesem (falschen) Pfad vom <link rel="stylesheet" ...>Tag mit der Absicht, CSS-Stile anzuwenden. Der zurückgegebene Inhaltstyp widerspricht jedoch, sodass ein Fehler protokolliert wird.

Erstellen Sie einen Ordner direkt unter / über der Datei style.css gemäß der Angular-Struktur und geben Sie einen Link wie an <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">.

Ich hatte diesen Fehler für eine Bootstrap-Vorlage.

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

Dann habe ich das rel="stylesheet"aus dem Link entfernt, dh:

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

Und alles funktioniert gut. Versuchen Sie dies, wenn Sie Bootstrap-Vorlagen verwenden.

Ich habe meine 'href' -> 'src' geändert. Also daraus:

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

dazu:

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

Es funktionierte. Ich weiß nicht warum, aber es hat den Job gemacht.

Kommentare in Ihrer Datei lösen dies aus. Einige Minifier entfernen keine Kommentare.

EBENFALLS

Wenn Sie Node.js verwenden und Ihre statischen Dateien expresswie folgt festlegen :

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

Sie müssen die Dateien richtig adressieren.

In meinem Fall waren beide das Problem, daher habe ich meinen CSS-Links "/css/styles.css" vorangestellt.

Beispiel:

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

Diese Lösung ist perfekt, da der Pfad das Hauptproblem ist, wenn CSS nicht gerendert wird

Ich habe einfach auf die CSS-Datei (in meinem Fall ein Angular-Thema) im Abschnitt " Stile " meiner Angular 6-Build-Konfiguration in angular.json verwiesen:

Dies beantwortet die Frage nicht, aber es könnte eine geeignete Problemumgehung sein, wie es für mich war.

Wie in diesem Beitrag erwähnt, haben einige der Lösungen für mich funktioniert, aber CSS gilt nicht für die Seite.

Ich habe einfach das Verzeichnis "css" in das Verzeichnis "Assest /" verschoben und alles funktioniert einwandfrei.

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

Überprüfen Sie diese Antwort auch für andere Benutzer, die Angular-CLI verwenden und in einem Unterordner auf dem Webserver veröffentlichen:

Wenn Sie auf einem Nicht-Root-Pfad innerhalb einer Domäne bereitstellen, müssen Sie das <base href="https://stackoverflow.com/">Tag in Ihrer Domäne manuell aktualisierendist/index.html.

In diesem Fall müssen Sie auf aktualisieren <base href="https://stackoverflow.com/sub-folder/">

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

Mein Problem ist, dass ich Webpack verwendet habe und in meinem HTML-CSS-Link einen relativen Pfad hatte. Jedes Mal, wenn ich zu einer verschachtelten Seite navigierte, wurde der falsche Pfad aufgelöst:

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

Die einfache Lösung bestand also darin, die zu entfernen, .da es sich bei meiner um eine einseitige Anwendung handelt .

So was:

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

so löst es sich immer auf /index.css

Ich hatte dieses Problem mit einer Site, von der ich wusste, dass sie online funktioniert, als ich sie auf localhost und PhpStorm verschob.

Das hat online gut funktioniert:

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

Aber für localhost musste ich den Schrägstrich loswerden:

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

Daher bekräftige ich bereits einige Antworten, die hier bereits gegeben wurden - es handelt sich wahrscheinlich eher um einen Pfad- oder Rechtschreibfehler als um ein kompliziertes Server-Setup-Problem. Der Fehler in der Konsole ist ein roter Hering; Die Registerkarte Netzwerk muss zuerst auf den 404 überprüft werden.

Unter den hier gegebenen Antworten finden Sie einige Lösungen, die nicht korrekt sind. Das Hinzufügen type="text/html"oder Ändern hrefvonsrc ist nicht die Antwort.

Wenn Sie alle Attribute haben möchten, damit sie auf den wählerischsten Validatoren und Ihrer IDE validiert werden, sollte der Medienwert angegeben werden und der relsollte sein stylesheet, z. B.:

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

Ich weiß, dass der Kontext möglicherweise nicht stimmt, aber das Verknüpfen einer nicht vorhandenen Datei kann dieses Problem verursachen, wie es mir zuvor passiert ist.

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

Wenn diese Datei nicht vorhanden ist, tritt dieses Problem auf.

Ich hatte das gleiche Problem.

Wenn die Struktur Ihres Projekts dem folgenden Baum entspricht:

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

Ich empfehle, den folgenden Code hinzuzufügen server.js:

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

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

Hinweis: Path ist ein integriertes Node.js-Modul, sodass dieses Paket nicht über npm installiert werden muss.

Neben einer langen Liste von Antworten ist mir dieses Problem auch passiert, weil ich nicht wusste, dass der Pfad aus Sicht der Browsersynchronisierung falsch war.

Angesichts dieser einfachen Ordnerstruktur:

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

Das hrefAttribut <link>in index.htmlmuss sein app/styles/style.cssund nichtstyles/style.css

Sie können die Google Chrome-Tools öffnen, die Registerkarte "Netzwerk" auswählen, Ihre Seite neu laden, die Dateianforderung des CSS suchen und nach dem Inhalt der Datei suchen.

Vielleicht haben Sie etwas falsch gemacht, als Sie die beiden Bibliotheken in Ihrer Datei zusammengeführt haben, einschließlich einiger Zeichen oder Überschriften, die für CSS nicht richtig sind?

Wenn Sie Express ohne JS verwenden, versuchen Sie Folgendes:

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

Als Beispiel befindet sich meine CSS-Datei bei public/stylesheets/app.css

Verwenden Sie für eine Node.js-Anwendung dies einfach, nachdem Sie alle erforderlichen Module in Ihre Serverdatei importiert haben:

app.use(express.static("."));

• Die in Express.static integrierte Middleware-Funktion in Express und dies in Ihrer HTML-Datei: <link rel="stylesheet" href="style.css">

Ich habe das gleiche Problem bekommen und dann überprüft, ob ich geschrieben habe:

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

Dann wechselte ich zu

<base href="/">

Und dann hat es gut funktioniert.

Entfernen Sie rel = "Stylesheet" und fügen Sie type = "text / html" hinzu. So wird es aussehen -

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

In meinem Fall hatte ich das Paket, als ich es live bereitstellte, aus dem öffentlichen HTML-Ordner. Es hatte einen Grund.

Aber anscheinend wurde eine strenge MIME-Typprüfung aktiviert, und ich bin mir nicht sicher, ob sie auf meiner Seite oder von der Firma ist, bei der ich hoste.

Sobald ich den Styling-Ordner in dasselbe Verzeichnis wie die Datei index.php verschoben habe, wurde der Fehler nicht mehr angezeigt, und das Styling wurde perfekt aktiviert.

Bootstrap-Stile werden nicht geladen # 3411

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

1. Ich habe Bootstrap v. 3.3.7 installiert

   npm install bootstrap --save

2. Dann habe ich die benötigten Skriptdateien apps[0].scriptsin die Datei angle-cli.json eingefügt:

   "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. Ich habe ng serv neu gestartet

Es hat bei mir funktioniert.

Wenn der Browser die zugehörige CSS-Datei nicht finden kann, kann dies zu einem Fehler führen.

Wenn Sie die Angular-Anwendung verwenden, müssen Sie den CSS-Dateipfad nicht in index.html einfügen

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

Sie können den zugehörigen CSS-Dateipfad in die Datei styles.css einfügen.

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

Einer der Hauptgründe für das Problem ist, dass die zu ladende CSS-Datei keine gültige CSS-Datei ist.

Ursachen:

• Ungültiger MIME-Typ
• JavaScript-Code im Stylesheet enthalten - (kann aufgrund einer falschen Konfiguration des Webpack-Bundlers auftreten)

Überprüfen Sie, ob die Datei, die Sie laden möchten, ein gültiges CSS-Stylesheet ist (rufen Sie die Server-URL der Datei auf der Registerkarte "Netzwerk" ab, klicken Sie auf eine neue Registerkarte und überprüfen Sie sie).

Nützliche Informationen zur Berücksichtigung bei der Verwendung von <link> innerhalb des Body-Tags.

Ein linkTag im Körper zu haben, ist jedoch nicht die Standardmethode für die Verwendung des Tags. Wir können es jedoch zur Seitenoptimierung verwenden (weitere Informationen: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery) ) / wenn der Geschäftsanwendungsfall dies erfordert (wenn Sie den Inhalt und den Server konfigurieren, für die konfiguriert ist müssen die HTML-Seite mit dem bereitgestellten Inhalt rendern).

Während wir im Body-Tag bleiben, müssen wir das Attribut wie folgt itemPropertyin das linkTag einfügen

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

Für weitere Informationen über itemPropertyeinen Blick in /webmasters/55130/can-i-use-link-tags-in-the-body-of-an-html-document .

Wenn Sie in die Browserkonsole> network> style.css ... klicken und darauf klicken, dass "/ path / to / my / CSS nicht abgerufen werden kann", wurde mir mitgeteilt, dass mein Link falsch war. Ich habe das in den Pfad meiner CSS-Datei geändert.

Der ursprüngliche Pfad vor der Änderung war localhost: 3000 / Example / public / style.css. Durch Ändern in localhost: 3000 / style.css wurde das Problem behoben.

wenn Sie die Datei von app.use aus bereitstellen (express.static (path.join (__ dirname, "public"))); oder app.use (express.static ("public")); Ihr Server würde "diesen Ordner" an den Browser übergeben, sodass das Hinzufügen eines Links "/yourCssName.css" in Ihrem Browser das Problem löst

Wenn Sie dem CSS-Link Ihres Browsers andere Routen hinzufügen, weisen Sie den Browser an, in der angegebenen Route nach dem CSS zu suchen.

Zusammenfassend ... Überprüfen Sie, wohin der CSS-Link Ihres Browsers zeigt.

Wenn Sie Stile in JavaScript wie folgt festlegen:

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

Dann ändern Sie einfach cssLint.type (in der obigen Beschreibung durch einen Pfeil gekennzeichnet) in "MIME":

   cssLink.type = "MIME";

Es wird Ihnen helfen, den Fehler zu beseitigen.

Dieses Problem tritt auf, wenn Sie das CLI-Tool entweder für Reactjs oder für Angular verwenden. Der Schlüssel besteht also darin, den gesamten endgültigen Build dieser Tools zu kopieren, da diese ihre eigenen Lite-Server initialisieren, wodurch Ihre URLs mit dem von Ihnen erstellten Back-End-Server verwechselt werden ... nehmen Sie den gesamten Build-Ordner und speichern Sie ihn im Asset-Ordner Ihres Back-End-Server-Projekts und verweisen Sie ihn von Ihrem Back-End-Server und nicht von dem Server, der mit Angular oder Reactjs geliefert wird. Andernfalls verwenden Sie ihn als Front-End von einem bestimmten API-Server

Ich bin auf dieses Problem gestoßen, bei dem das gleiche Problem beim Hinzufügen eines benutzerdefinierten Erscheinungsbilds zu einem Azure B2C-Benutzerfluss aufgetreten ist. Was ich fand, war, dass der Stamm, auf den sich die HTML-Seite bezog, eher ../oauth/v2 (dh der oauth-Serverpfad) als der Pfad zu meinem Speicher-Bob war.

Das Einfügen der vollständigen URL der Seiten hat das Problem für mich behoben.

Überprüfen Sie, ob Sie eine Komprimierung aktiviert oder deaktiviert haben. Wenn Sie es verwenden oder jemand es aktiviert hat, dannapp.use(express.static(xxx)) , hilft nicht. Stellen Sie sicher, dass Ihr Server die Komprimierung zulässt.

Ich sah den ähnlichen Fehler, als ich meinem Webpack Brotli- und Komprimierungs-Plugins hinzufügte. Dann muss Ihr Server auch diese Art der Inhaltskomprimierung unterstützen.

Wenn Sie Express verwenden, sollte Folgendes helfen:

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

Das Modul heißt: express-static-gzip

Meine Einstellungen sind:

const gzipOptions = {
  enableBrotli: true,
  customCompressions: [{
  encodingName: 'deflate',
  fileExtension: 'zz'
 }],
 orderPreference: ['br']
}