wake-up-neo.com

Stylesheet wurde wegen MIME-Typ nicht geladen

Ich arbeite an einer Website, die gulp zum Kompilieren und Browsersynchronisierung verwendet, um den Browser mit meinen Änderungen zu synchronisieren.

Die gulp-Aufgabe kompiliert alles ordnungsgemäß, aber auf der Website kann ich keinen Stil sehen. In der Konsole wird diese Fehlermeldung angezeigt:

Weigerte sich, Stil von .__ anzuwenden. ' http: // localhost: 3000/assets/styles/custom-style.css ' wegen seiner Der MIME-Typ ('text/html') ist kein unterstützter MIME-Typ im Stylesheet und Die strenge MIME-Prüfung ist aktiviert.

Ich verstehe nicht wirklich, warum das so ist.

Die HTML-Datei enthält die folgende Datei (die ich ziemlich sicher ist, dass sie korrekt ist):

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

und das Stylesheet ist eine Zusammenführung zwischen Bootstrap- und font-awesome-Styles (jetzt noch nichts benutzerdefiniert).

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

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

Aber ich bekomme immer den Fehler.

Irgendeine Idee, was es sein könnte? Ist das etwas (vielleicht eine Einstellung?) Für gulp/browsersync vielleicht?

Jede Hilfe wird sehr geschätzt, und fragen Sie bei Bedarf nach weiteren Details.

Vielen Dank

166
Nick

Ok, ich glaube, ich habe eine Lösung gefunden und schreibe sie hier, falls jemand anders hilft.

Ich glaube, das Problem war eine CSS-Bibliothek, die mit Kommentaren begann. Während auf dev keine Dateien minifiziert und keine Kommentare entfernt wurden, bedeutete dies, dass das Stylesheet mit einigen Kommentaren begann und es als gesehen wurde etwas anderes als css.

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

Ich bin nicht zu 100% sicher, dass dies ein Fix ist, aber es ist immer noch ein Gewinn für mich, da es jetzt wie erwartet funktioniert.

85
Nick

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

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

Beachte das /public hat am Ende keinen Schrägstrich, daher müssen Sie ihn in Ihre href-Option Ihres HTML-Codes aufnehmen:

href="/css/style.css">

Wenn Sie einen Schrägstrich (/public/) dann kannst du einfach href="css/style.css".

85
JPaulino

make a folder just below/above style.css file gemäß Winkelstruktur und Link wie <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> enter image description here

50
Gopi G.A

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

Zum Beispiel, wenn Ihr Link-Tag ist 

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

ihre CSS-Datei hat jedoch den Namen style.css (ohne die zweiten s), und es besteht eine gute Chance, dass Sie diesen Fehler sehen. 

39
John Deverall

In den meisten Fällen könnte dies einfach der Pfad der CSS-Datei ist falsch. Der Webserver gibt also status: 404 mit einer Not Found-Inhaltsnutzlast vom Typ html 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, so dass ein Fehler protokolliert wird.

 enter image description here

22

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

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

Dann entfernte ich den rel="stylesheet" aus dem Link, d. H .:

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

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

20
Amandeep Saini

Ich habe einfach auf die CSS-Datei (in meinem Fall ein eckiges Thema) im Abschnitt styles meiner 6-Konfiguration von angle.json verwiesen

 enter image description here

Dies beantwortet die Frage nicht, kann aber eine geeignete Lösung sein, wie es für mich der Fall war. Hoffe, es hilft.

16
dvlsc

Ich habe mein 'href' -> 'src' geändert. Also hiervon:

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

zu diesem:

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

3 Uhr morgens hier und es hat funktioniert, weiß nicht warum, aber es hat die Arbeit gemacht.

14

Kommentare in Ihrer Datei werden dies zum Absturz bringen. Einige Minifier entfernen Kommentare nicht.

EBENFALLS

Wenn Sie NodeJS verwenden und Ihre statischen Dateien mit express wie folgt einstellen:

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

Sie müssen die Dateien richtig ansprechen.

In meinem Fall war beides das Problem, also fügte ich meinen CSS-Links "/css/styles.css" voran. 

Beispiel:

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

Auch für andere Benutzer, die mit eckig-cli arbeiten und in einem Unterordner auf dem Webserver veröffentlichen, überprüfen Sie diese Antwort:

Wenn Sie sich innerhalb einer Domäne in einem Pfad ohne Root-Pfad befinden, müssen Sie den Tag <base href="/"> in Ihrem Code dist/index.html. manuell aktualisieren.

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

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

8
simonberry

Wie in diesem Beitrag erwähnte Lösungen erwähnt, werden einige Lösungen für mich bearbeitet, aber CSS gilt nicht für die Seite.

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

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

7
Jitendra G2

mein problem ist, dass ich webpack verwendete und in meinem html-css-link hatte ich einen relativen Pfad, und wenn ich zu einer verschachtelten Seite navigiere, würde das zum falschen Pfad führen:

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

die einfache Lösung bestand also darin, den . zu entfernen, da meins eine Einzelseiten-App ist.

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

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

5
Jared

Ich bekomme dasselbe Problem und habe dann überprüft, ob ich geschrieben habe

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

Dann wechselte ich zu 

<base href="/">

dann funktioniert es gut

5
VIKAS KOHLI

Für Node.js-Anwendung. Verwenden Sie dies einfach, nachdem Sie alle erforderlichen Mudules in Ihre Server-Datei importiert haben:

app.use(express.static("."));
  • express.static integrierte Middleware-Funktion in Express und dies in Ihrer .html-Datei: <link rel="stylesheet" href="style.css">
4
Purav Barot

Sie können die Chrome-Tools öffnen, die Registerkarte "Netzwerk" auswählen, Ihre Seite neu laden, die Dateianforderung der CSS finden und nach dem Inhalt der Datei suchen. Möglicherweise haben Sie etwas falsch gemacht, wenn Sie die beiden Bibliotheken in Ihrer Datei zusammenführen, einschließlich einiger Zeichen oder Kopfzeilen, die nicht richtig für css sind. 

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

Aber anscheinend wurde die strenge Überprüfung der Mime-Typen aktiviert. 

Sobald ich den Stilordner in das gleiche Verzeichnis wie die Datei index.php verschoben habe, hörte ich auf, den Fehler zu erhalten, und das Stilen wurde perfekt aktiviert.

4
Jabulani

Einer der Hauptgründe für das Problem: Die CSS-Datei, die versucht zu laden, ist keine gültige CSS-Datei. causes:- invalid MIME type, having Javascript code inside style sheet- (kann aufgrund einer falschen Konfiguration des Webpack-Bündlers auftreten.) 

Überprüfen Sie, ob die Datei, die Sie laden möchten, ein gültiges CSS-Stylesheet ist (Holen Sie sich die Server-URL der Datei von der Registerkarte "Netzwerk" und klicken Sie in eine neue Registerkarte, um sie zu überprüfen.)

Useful info für die Verwendung bei der Verwendung des Body-Tags.

Das link-Tag im Körper zu haben, ist zwar 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 Hauptteil des Inhalts bedienen und Server konfiguriert, um eine HTML-Seite mit dem bereitgestellten Inhalt darstellen zu müssen).

Während wir uns innerhalb des body-Tags befinden, müssen wir das Attribut itemProperty im link-Tag wie <body> <!-- … --> <link itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye" /> <!-- … --> </body> hinzufügen.

weitere Informationen zu itemProperty finden Sie unter: https://webmasters.stackexchange.com/questions/55130/can-i-use-link-tags-in-the-body-of-an-html-document

3
BALA

Ich hatte das gleiche Problem. Wenn die Struktur Ihres Projekts der folgenden Baumstruktur entspricht, empfehle ich Folgendes:

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

In server.js fügen Sie diesen Code hinzu:

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

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

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

2
Mostafa Ghadimi

Zusätzlich zu einer langen Liste von Antworten ist mir dieses Problem auch passiert, weil ich nicht wusste, dass der Pfad in Bezug auf die Browsersynchronisierung falsch war.

Angesichts dieser einfachen Ordnerstruktur:

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

das href-Attribut in <link> in index.html muss app/styles/style.css und nicht styles/style.css sein.

2
Stig Perez

Wenn Sie Styles in Javascript als einstellen: 

    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) zu "MIME"

   cssLink.type = "MIME";

Hilft Ihnen, Fehler zu beseitigen

2
Shriram

Ich bin auf das gleiche Problem gestoßen, bei dem einem Azure B2C-Benutzerfluss ein benutzerdefiniertes Erscheinungsbild hinzugefügt wurde. Was ich fand, war, dass das Stammverzeichnis, auf das sich die HTML-Seite bezog, ../oauth/v2 war (d. H. Der oauth Serverpfad) und nicht der Pfad zu meinem Speicher-Bob.

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

1
Liam

Überprüfen Sie dreimal den Namen und den Pfad der Datei. In meinem Fall hatte ich einen ähnlichen Inhalt im Zielordner:

lib
    foobar.bundle.js
    foobr.css

Und dieser Link:

<link rel="stylesheet" href="lib/foobar.css">

Ich vermute, dass der Browser versucht hat, die js-Datei zu laden, und sich über seinen MIME-Typ beschwert, anstatt mir einen nicht gefundenen Fehler zu geben.

1
pasx

Ich hatte das gleiche Problem und nach stundenlangem Debugging habe ich herausgefunden, dass es sich um temporäre Dateien handelt, die nicht geschrieben werden können .. _. Gehen Sie zu admin> config> Dateisystem . Richtiges temporäres Verzeichnis. Stellen Sie sicher, dass Ihr Server die Berechtigung hat, in dieses Verzeichnis zu schreiben.

1
Asit

Ich hatte diesen Fehler in Angular. Ich löste es, indem ich meinem Link-Element eine NgIf hinzufügte, damit es nicht im Dom angezeigt wurde, bis meine dynamische URL gefüllt wurde.

Vielleicht hat es etwas mit OP zu tun, aber ich habe hier nach einer Antwort gesucht

<link *ngIf="cssUrl" rel="stylesheet" type="text/css" [href]="sanitizer.bypassSecurityTrustResourceUrl(cssUrl)"> 
1
SeanKPS

die Lösung von diesem Thread hat mein Problem gelöst

Ich bin mir nicht sicher, ob dies jemandem helfen wird, aber wenn Sie angle-cli verwenden, habe ich dies behoben, indem ich die css-Referenz aus meiner index.html entfernt und sie in die Datei angle-cli.json unter "style" eingefügt habe. . Nach dem Neustart meines Webservers hatte ich dieses Problem nicht mehr.

1
newbie

wenn Sie Express ohne JS verwenden, schreiben Sie einfach: app.use (express.static ('public'));

meine CSS-Datei befindet sich unter public -> stylesheets-> app.css

1
Tal Hakmon

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

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

Wenn Sie Express verwenden, sollten die folgenden Punkte hilfreich sein:

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']
}
1
Greg Woz

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

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

Ich habe dieses Problem getroffen. - Es wurde abgelehnt, den Stil von ' http://m.b2b-v2-pre1.jcloudec.com/mobile-dynamic-load-component-view/resource/js/resource/js/need/layer.css?2.0 anzuwenden 'weil der MIME-Typ (' text/html ') kein unterstützter MIME-Typ ist und die strenge MIME-Prüfung aktiviert ist. Ändern Sie den Pfad, um dieses Problem zu beheben.

1
ZILONG PAN

Ich hatte dieses Problem mit einer Website, von der ich wusste, dass sie online arbeitete, als ich sie zu localhost und phpStorm verlegte.

Das funktionierte gut online:

    <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 möchte ich bereits einige Antworten geben, die hier gegeben werden. Es handelt sich wahrscheinlich um einen Pfad- oder Rechtschreibfehler und nicht um ein kompliziertes Server-Setup-Problem. Der Fehler in der Konsole ist ein roter Hering, die Netzwerkregisterkarte muss zuerst für 404 geprüft werden.

Unter den Antworten, die hier gegeben werden, sind einige Lösungen, die nicht korrekt sind. Das Hinzufügen von type="text/html" oder das Ändern von href in src ist nicht die Antwort.

Wenn Sie alle Attribute haben möchten, damit diese auf den kleinsten der Validatoren und Ihrer IDE validiert werden, sollte der Medienwert angegeben werden und die Variable rel muss stylesheet sein, z. B .:

    <link rel="stylesheet" href="css/additional.css" type="text/css" media="all">
0
Henry's Cat

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

0
ndoty

Ich habe versucht, meinen Windows-Computer neu zu starten und "npm i" neu installiert.

Es hat bei mir funktioniert.

0
verma

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 erforderlichen Skriptdateien zu apps[0].scripts in der Datei angular-cli.json hinzugefü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 serve neu gestartet

Es hat bei mir funktioniert.

0
HSN KH

Möglicherweise haben Sie ein Autorisierungsproblem Buddy:

Versuchen Sie diese Schritte:

  1. Gehen Sie zu ISS -> finden Sie Ihr Projekt in der Liste -> klicken Sie darauf -> klicken Sie auf Berechtigungen bearbeiten im rechten Bereich unter Aktionen
  2. der Assistent für Projekteigenschaften wird angezeigt. Klicken Sie auf Wertpapiere
  3. Unter Gruppen oder Benutzernamen -> Wenn Sie "Authentifizierte Benutzer" sehen, sind Sie berechtigt, wenn nicht, müssen Sie es.
  4. Sobald Sie es hinzufügen (selbst oder mithilfe Ihres Administrators, wenn Sie in einem Unternehmen arbeiten :)), wird die Website Ressourcen laden. Möglicherweise müssen Sie Ihr Projekt unter ISS neu starten.

Vielen Dank

0
Rakesh

Das erneute Speichern einer .ts-Datei (das Erzwingen des Neuaufbaus von Ionic) hat es für mich gelöst.

Das ergibt eigentlich keinen Sinn ... aber solange es funktioniert, wen soll ich beurteilen?

Hier habe ich diese Problemumgehung gesehen: ionic/angular2 - Es wurde abgelehnt, den Stil von 'http: // localhost: 8100/build/main.css' anzuwenden, da er den MIME-Typ ('text/html ') wird nicht unterstützt

0
luciomonter

Ich hatte das gleiche Problem, und in meinem Fall lag es daran, dass ich manuell versucht hatte, css-Dateien in der HTML-Datei zu importieren (wie wir es immer bei statischen Websites tun), obwohl die Dateien tatsächlich sein mussten importiert in der von webpack verwendeten Einstiegspunkt-JS-Datei.

Wenn die Stylesheets in die Haupt-JS-Datei importiert wurden und nicht manuell in HTML geschrieben wurden, funktionierte alles wie erwartet.

0
Magnus

Ein weiterer Grund für diesen Fehler kann sein, dass die CSS-Dateiberechtigungen falsch sind. In meinem Fall war der Zugriff auf die Datei nicht möglich, da der Besitzer auf den Root-Benutzer geändert wurde - was darauf zurückzuführen ist, dass Git-Dateien als Root-Benutzer übertragen wurden.

0
apostl3pol