Frage Stylesheet wurde wegen MIME-Type nicht geladen


Ich arbeite an einer Website, die Gulp verwendet, um zu kompilieren und Browser-Synchronisierung, um den Browser mit meinen Änderungen synchronisiert zu halten.

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

Abgelehnt, um Stil anzuwenden   "http: // localhost: 3000 / Assets / Stile / custom-style.css' weil es   MIME-Typ ('text / html') ist kein unterstützter Stylesheet-MIME-Typ und   strikte MIME-Prüfung ist aktiviert.

Jetzt verstehe ich nicht wirklich, warum das passiert.

Das HTML enthält die Datei wie folgt (was ich ziemlich sicher bin):

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

und das Stylesheet ist eine Mischung zwischen Bootstrap & Font-genialen Stilen für jetzt (noch nichts Brauchbares).

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

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

Aber ich bekomme den Fehler immer wieder.

Irgendeine Idee, was es sein könnte? ist das etwas (vielleicht eine Einstellung?) für Schluck / Browsersync vielleicht?

Jede Hilfe wird wirklich geschätzt, und zögern Sie nicht, um weitere Details zu bitten, wenn nötig.

Vielen Dank


76
2018-01-14 10:52


Ursprung


Antworten:


Ok ich denke, ich habe eine Lösung gefunden und ich schreibe sie hier für den Fall, dass sie jemand anderem hilft.

Das Problem, das ich denke, war mit einer CSS-Bibliothek, die mit Kommentaren anfing. Während ich auf dem Dev bin, mache ich keine Dateien kleiner und ich entferne keine Kommentare, das bedeutete, dass das Stylesheet mit einigen Kommentaren begann, was dazu führte, dass es als etwas anderes als CSS angesehen wurde.

Das Entfernen der Bibliothek und das Einfügen in die Vendor-Datei (die IMMER ohne Kommentare minimiert wurde) löste das Problem.

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


45
2018-01-15 20:46



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


42
2018-03-09 06:41



Zum Node.js Anwendungen, überprüfen Sie Ihre Konfiguration:

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

Beachte das /public hat keinen Schrägstrich am Ende, also müssen Sie es in Ihre href-Option Ihres html einfügen:

href="/css/style.css">

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

Ich hoffe, das hilft, Vielen Dank


23
2018-02-07 14:54



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

Zum Beispiel, wenn Ihr Link-Tag ist

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

aber Ihre CSS-Datei wird benannt style.css (ohne die zweite s) dann besteht eine gute chance, dass sie diesen fehler sehen werden.


16
2018-05-04 11:34



Überprüfen Sie in Node.js die Datei app.js. Es hat einen Eintrag wie:

  1. app.use(express.static(__dirname);

oder

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

oder

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

Beachten Sie, dass in 1 und 2 / public am Ende kein Schrägstrich steht, also müssen Sie es in Ihre href-Option Ihres html einfügen:

href="/css/style.css"

sonst (3. Option)

Sie müssen es in Ihre href-Option Ihres html einfügen:

href="css/style.css"

7
2018-06-25 15:58



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

Wenn Sie einen Nicht-Root-Pfad in einer Domäne bereitstellen, müssen Sie die Aktualisierung manuell durchführen <base href="/"> Tag in Ihrem dist/index.html.

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

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


5
2018-03-19 16:07



Ich referenzierte einfach die CSS - Datei (in meinem Fall ein kantiges Thema) in der Stile Abschnitt meiner eckigen 6 Build-Konfiguration in angular.json

enter image description here

Dies beantwortet die Frage nicht, aber könnte eine geeignete Umgehungslösung sein, wie es für mich war. Ich hoffe es hilft.


5
2018-06-28 09:05



Kommentare in Ihrer Datei werden dies stolpern. Einige Minifier entfernen keine Kommentare.

EBENFALLS

Wenn du benutzt KnotenJS und setze deine statischen Dateien mit express wie:

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

Sie müssen die Dateien richtig adressieren.

In meinem Fall war beides das Problem, also habe ich meine CSS-Links an "/css/styles.css" angehängt.

Beispiel:

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

4
2018-04-09 14:46



Sie können die Chrome-Tools öffnen, die Netzwerk-Registerkarte auswählen, Ihre Seite neu laden und die Dateianforderung der CSS-Datei suchen und herausfinden, was sie in der Datei hat. Vielleicht haben Sie etwas falsch gemacht, wenn Sie die beiden Bibliotheken in Ihrer Datei zusammenführen, einschließlich einiger Zeichen oder Header nicht richtig für CSS?


2
2018-01-14 11:00



Mein Problem ist, dass ich webpack benutzte und in meinem html css link hatte ich einen relativen Pfad, und wann immer ich zu einer verschachtelten Seite navigieren würde, die in den falschen Pfad aufgelöst würde:

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

so war die einfache Lösung, das zu entfernen . da meins ist eine einzelne Seite App. so was:

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

Es löst also immer auf /index.css


2
2018-02-18 22:05



Für Node.js-Anwendung. Verwenden Sie dies nach dem Import aller benötigten Module in Ihrer Serverdatei:

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

2
2018-03-05 05:42