Arkusz stylów nie został załadowany z powodu typu MIME

381

Pracuję nad witryną, która używa gulpdo kompilacji i synchronizacji przeglądarki, aby utrzymać synchronizację przeglądarki z moimi zmianami.

Zadanie gulp kompiluje wszystko poprawnie, ale na stronie nie widzę żadnego stylu, a konsola wyświetla następujący komunikat o błędzie:

Odmówiono zastosowania stylu z „ http: // localhost: 3000 / resources / styles / custom-style.css ”, ponieważ jego typ MIME („text / html”) nie jest obsługiwanym typem arkusza stylów MIME, a ścisłe sprawdzanie MIME jest włączone.

Teraz tak naprawdę nie rozumiem, dlaczego tak się dzieje.

HTML zawiera taki plik (co jestem pewien, że jest poprawny):

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

Arkusz stylów jest na razie połączeniem stylów Bootstrap z niesamowitymi czcionkami (na razie nic niestandardowego).

Ścieżka jest również poprawna, ponieważ jest to struktura folderów:

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

Ale ciągle pojawia się błąd.

Co to mogło być? Czy to coś (może ustawienie?) Dla gulp / browsersync może?

Nacięcie
źródło
Otrzymywałem to, gdy mój połączony arkusz stylów zaczął się od tagu html <style ... zamiast po prostu przejść od razu do reguł stylu. Otrzymałem to również podczas łączenia w później załadowanym pliku HTML (AngularJS), więc przełączyłem się na dynamiczne ładowanie przy ładowaniu strony przez JavaScript i problem zniknął.
Newclique
82
Dzieje się tak, gdy ustawisz niepoprawny adres URL pliku lub gdy serwer nie zostanie poprawnie skonfigurowany. W rezultacie przeglądarka NIE pobiera arkusza stylów, ale pobiera trochę HTML ze statusem 404 i nagłówkiem „Content-Type”. Ponieważ przeglądarka pobiera coś z serwera, nie informuje, że nie ma odpowiedzi, ale informuje, że typ pliku MIME jest niepoprawny. Najszybszym sposobem sprawdzenia tego jest po prostu próba otwarcia pliku bezpośrednio http://localhost:3000/assets/styles/custom-style.cssw nowej karcie.
RussCoder,
6
Dla mnie tak było w przypadku RussCodera. Powodem tego było to, że użyłem Angulara i zapomniałem dodać plik css do pakietu stylów w angular.json. Zostało to zignorowane podczas tworzenia aplikacji.
Jana
1
Mogę być w stanie rozwiązać ten problem za pomocą wiosennych konfiguracji zabezpieczeń. Blokował dostęp do folderu zasobów.
sndu
2
Zła proxy.conf.jsonkonfiguracja doprowadziła nas do tego dziwnego błędu, ponieważ przekazywanie żądań do interfejsu API zaplecza nie działało poprawnie, dlatego odpowiedź na błąd HTML.
ktsangop,

Odpowiedzi:

137

W przypadku aplikacji Node.js sprawdź swoją konfigurację:

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

Zauważ, że /publicna końcu nie ma ukośnika, więc musisz uwzględnić go w opcji href HTML:

href="/css/style.css">

Jeśli /public/dodałeś ukośnik ( ), możesz to zrobić href="css/style.css".

JPaulino
źródło
href = "/ resources / style.css"> w moim przypadku rozwiązałem problem!
Sergio Guerjik
127

Myślę, że problem dotyczył biblioteki CSS, zaczynającej się od komentarzy.

Podczas opracowywania nie minimalizuję plików i nie usuwam komentarzy. Oznaczało to, że arkusz stylów zaczął się od kilku komentarzy, przez co można go postrzegać jako coś innego niż CSS.

Usunięcie biblioteki i umieszczenie jej w pliku dostawcy (który ZAWSZE jest minimalizowany bez komentarzy) rozwiązało problem.

Ponownie, nie jestem w 100% pewien, że to jest poprawka, ale nadal jest to dla mnie wygrana, ponieważ działa teraz zgodnie z oczekiwaniami.

Nacięcie
źródło
4
Połowa poprawki, ponieważ jeśli nie chcesz umieścić całego tego css u dostawcy, co powinieneś zrobić? Zminimalizować moduły node_modules przy każdym testowaniu aplikacji? Doh ... Czy znalazłeś coś, aby po prostu skompilować określony moduł?
SteamFire
1
W moim procesie kompilacji plik dostawcy jest tworzony tylko na kompilacji, a następnie obserwuję zmiany w plikach, nad którymi faktycznie pracuję (co zwykle nie jest niczym, co wchodzi w dostawcę). Oznacza to, że pierwsza kompilacja jest nieco wolniejsza, ale potem po prostu kompiluję pliki bez minimalizacji, co nie spowalnia procesu
Nick
3
Natknąłem się na ten sam problem i stwierdziłem, że próbowałem załadować zminimalizowaną wersję pliku, który był obecny na serwerze jako plik niezminimalizowany. Próbowałem więc załadować plik „custom-style.min.css”, gdy plik na serwerze to „custom-style.css”. Po zmianie linku, aby załadować odpowiedni zasób, wszystko działało dobrze.
Programista Dan
Problem nie ogranicza się do CSS. Dostałem również 404 na plik JS, który był spowodowany komentarzem w pierwszym wierszu.
Czarny
80

Ten błąd może również pojawić się, gdy nie odwołujesz się prawidłowo do pliku CSS.

Na przykład jeśli tag linku to

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

ale plik CSS ma nazwę style.css(bez drugiego), istnieje duża szansa, że ​​zobaczysz ten błąd.

John Deverall
źródło
4
Dokładnie to, co mi się przydarzyło. Próbowałem tutaj każdej odpowiedzi (zmień typ mimet, usuń komentarze CSS, zmień konfigurację node.js ...). Wszystko, co musiałem zrobić, to naprawić literówkę w nazwie CSS. Doh!
AJPerez
5
Aby dodać do tej odpowiedzi, upewnij się, że gulp rzeczywiście znalazł plik css i przesłał go do twojego dist. Ilekroć pojawia się ten błąd, dzieje się tak dlatego, że jakoś spieprzyłem swoją ścieżkę do plików css i po prostu nie istnieje w katalogu kompilacji.
LAdams87
5
Tak, to samo dla mnie, prosta i głupia literówka. Myślę, że co to robi, że serwer wysyła stronę odpowiedzi 404, więc twoja przeglądarka dostaje tę stronę 404 i mówi ci, że to nie jest właściwe css ... co jest prawdą.
tanou
62

W większości przypadków może to być po prostu nieprawidłowa ścieżka pliku CSS . Tak więc serwer WWW powraca status: 404z pewną Not Foundzawartością htmltypu treści .

Przeglądarka podąża tą (niewłaściwą) ścieżką od <link rel="stylesheet" ...>tagu z zamiarem zastosowania stylów CSS. Ale zwracany typ zawartości zaprzecza, więc rejestruje błąd.

Wpisz opis zdjęcia tutaj

Tharaka
źródło
Mój problem polegał na tym, że ścieżka była nieprawidłowa. Ale ta zła ścieżka była spowodowana niepoprawnym ustawieniem bazy href dla mojego projektu kątowego. Jeśli ktokolwiek zaczął widzieć ten błąd po zaktualizowaniu podstawowego href, może to być przyczyną.
Krejko
1
Dziękujemy za trud pełnego i jasnego udokumentowania, w jaki sposób błąd 404 w pliku CSS może spowodować powstanie tego (początkowo) zagadkowego komunikatu o błędzie
Velojet
1
innym sposobem na rozwiązanie problemu, wklej adres URL, na którym pojawia się ten błąd, na inną kartę, jeśli nie widzisz CSS, prawdopodobnie jest to problem
BlackICE,
Dziękuję za podpowiedź
Jason Zhou
52

Utwórz folder tuż pod / powyżej pliku style.css zgodnie ze strukturą Angular i podaj link podobny <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">.

Wpisz opis zdjęcia tutaj

Gopi GA
źródło
23
Dlaczego to działa? Błąd stwierdza, że ​​„text / html” nie jest obsługiwanym typem MIME.
James Bateson
6
W moim przypadku błąd zniknął, style css jednak nie są stosowane ..: /
Andru
2
Spędziłem trochę więcej czasu czytając o tym problemie i zmieniając typ pliku css ibto, coś innego może powodować poważne problemy, takie jak odczytywanie css przez serwer jako html
Nick
W AngularDart katalogiem głównym pliku index.html jest folder „web”, a nie główny folder projektu. Więc wszystkie pliki css muszą znajdować się w folderze internetowym. Jak ten „[folder projektu] \ web [twoja_plik_sysa]]. Więc jeśli spróbujesz zaimportować plik css znajdujący się poza folderem internetowym, nie zostanie on znaleziony.
Wael
40

Miałem ten błąd dla szablonu Bootstrap.

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

Następnie usunąłem rel="stylesheet"link, tj .:

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

I wszystko działa dobrze. Wypróbuj to, jeśli korzystasz z szablonów Bootstrap.

Amandeep Saini
źródło
3
Dobry chwyt Błąd zniknął teraz.
Bogaty
1
Według standardu życia (4.2.4) , „element łączący A musi mieć albo atrybut rel lub atrybut itemprop, ale nie jednocześnie.” Tak więc usunięcie relatrybutu po prostu usuwa funkcjonalność dołączania arkusza stylów.
Artjom B.,
to dziwnie zadziałało dla mnie.
34

Zmieniłem mój „href” -> „src”. Więc z tego:

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

do tego:

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

Zadziałało. Nie wiem dlaczego, ale zadziałało.

Sebastian Voráč
źródło
1
Chociaż to również działało dla mnie, czy jest to prawidłowy atrybut?
sr9yar
1
@ sr9yar Masz rację, że według validator.w3.org posiadanie src w linku nie jest poprawne, więc jest dobre jako szybka poprawka, ale jak tylko będziesz miał trochę więcej czasu, sugeruję znaleźć inną prawidłowe obejście.
Sebastian Voráč
20

Komentarze w twoim pliku spowodują to. Niektóre minifikatory nie usuwają komentarzy.

RÓWNIEŻ

Jeśli używasz Node.js i ustawiasz pliki statyczne za pomocą expresstakich jak:

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

Musisz poprawnie zaadresować pliki.

W moim przypadku oba były problemami, więc moje linki CSS poprzedziłem „/css/styles.css”.

Przykład:

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

To rozwiązanie jest idealne, ponieważ ścieżka jest głównym problemem dla CSS, który nie otrzymuje renderowania

metal_jacke1
źródło
18

Po prostu odwołałem się do pliku CSS (w moim przypadku motyw Angular) w sekcji stylów mojej konfiguracji kompilacji Angular 6 w angular.json:

Wpisz opis zdjęcia tutaj

To nie odpowiada na pytanie, ale może być odpowiednim obejściem, jak dla mnie.

dvlsc
źródło
3
To poprawna odpowiedź dla projektów Angular-CLI 6
Torsten Barthel,
14

Jak wspomniano o rozwiązaniach w tym poście, niektóre rozwiązania działały dla mnie, ale CSS nie ma zastosowania na stronie.

Po prostu przeniosłem katalog „css” do katalogu „Assest /” i wszystko działa dobrze.

<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/css/site.css" >
Jitendra G2
źródło
Awesome (Y) naprawił mój problem
Chakri
12

Również dla innych korzystających z Angular-CLI i publikujących w podfolderze na serwerze internetowym sprawdź tę odpowiedź:

Podczas wdrażania na ścieżce innej niż root w domenie, musisz ręcznie zaktualizować <base href="https://stackoverflow.com/">tag w swoimdist/index.html.

W takim przypadku musisz zaktualizować do <base href="https://stackoverflow.com/sub-folder/">

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

simonberry
źródło
10

Mój problem polega na tym, że korzystałem z webpacka, aw swoim linku HTML CSS miałem ścieżkę względną i za każdym razem przechodziłem do zagnieżdżonej strony, która prowadziłaby do niewłaściwej ścieżki:

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

więc prostym rozwiązaniem było usunięcie tej, .ponieważ moja jest aplikacją jednostronicową .

Lubię to:

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

więc zawsze rozwiązuje /index.css

Jared
źródło
Tak, w moim przypadku zapomniałem usunąć te ścieżki względne z mojego pliku index.html i uruchomiłem webpack w trybie produkcyjnym. Ścieżki te nie są potrzebne, ponieważ webpack dynamicznie łączy pliki css poprzez webpack.prod.js.
Kewal Shah
10

Miałem ten problem z witryną, o której wiedziałem, że działa online, kiedy przeniosłem ją do localhost i PhpStorm.

Działa dobrze online:

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

Ale dla localhost musiałem pozbyć się slash:

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

Dlatego wzmacniam kilka podanych tutaj odpowiedzi - może to być błąd w pisowni lub błąd ortograficzny, a nie jakikolwiek skomplikowany problem z konfiguracją serwera. Błąd w konsoli to czerwony śledź; najpierw należy sprawdzić kartę sieci dla 404.

Wśród podanych tutaj odpowiedzi znajduje się kilka nieprawidłowych rozwiązań. Dodanie type="text/html"lub zmianahref nasrc nie jest odpowiedzią.

Jeśli chcesz mieć wszystkie atrybuty, aby sprawdzało się to w jak najmniejszej liczbie walidatorów i twojego IDE, należy podać wartość nośnika i relpowinna ona wynosić stylesheetnp .:

    <link rel="stylesheet" href="css/additional.css" type="text/css" media="all">
Kot Henry'ego
źródło
9

Wiem, że może to być poza kontekstem, ale połączenie nieistniejącego pliku może powodować ten problem, tak jak wcześniej.

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

Jeśli ten plik nie istnieje, napotkasz ten problem.

Safwat Fathi
źródło
8

Miałem ten sam problem.

Jeśli struktura twojego projektu przypomina następujące drzewo:

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

Polecam dodać następujący fragment kodu server.js:

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

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

Uwaga: Ścieżka jest wbudowanym modułem Node.js, więc nie trzeba instalować tego pakietu za pomocą npm.

Mostafa Ghadimi
źródło
7

Dodając do długiej listy odpowiedzi, ten problem również mi się przydarzył, ponieważ nie zdawałem sobie sprawy, że ścieżka jest niepoprawna z punktu widzenia synchronizacji przeglądarki.

Biorąc pod uwagę tę prostą strukturę folderów:

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

hrefwewnątrz atrybut <link>w index.htmlmusi być app/styles/style.cssi niestyles/style.css

Stig Perez
źródło
Rzeczywiście, tylko literówka na ścieżce dała mi ten sam błąd.
Julesezaar
Wow, to zadziałało dla mnie, dziękuję bardzo. Miałem dosłownie się poddać
Vash
7

Możesz otworzyć narzędzia Google Chrome, wybrać kartę sieci, ponownie załadować stronę i znaleźć żądanie pliku CSS i poszukać tego, co ma w pliku.

Może zrobiłeś coś złego, scalając dwie biblioteki w swoim pliku, w tym niektóre znaki lub nagłówki niepoprawnie w CSS?

Yunior González Santana
źródło
1
niestety próbowałem, ale to naprawdę nie pomaga, żądanie kończy się niepowodzeniem natychmiast i ma tylko adres URL żądania (co jest poprawne)
Nick
6

Jeśli używasz Express bez JS, spróbuj:

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

Na przykład mój plik CSS to public/stylesheets/app.css

Tal Hakmon
źródło
5

W przypadku aplikacji Node.js użyj tego po zaimportowaniu wszystkich wymaganych modułów z pliku serwera:

app.use(express.static("."));
  • express.static wbudowana funkcja oprogramowania pośredniego w Express i to w pliku .html: <link rel="stylesheet" href="style.css">
Purav Barot
źródło
3
Naprawdę nie chcesz podawać publicznie kodu serwera, prawda?
Ki Jéy,
5

Dostałem ten sam problem, a potem sprawdziłem, czy napisałem:

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

Potem zmieniłem na

<base href="/">

A potem działało dobrze.

VIKAS KOHLI
źródło
4

Usuń rel = "stylesheet" i dodaj type = "text / html". Tak to będzie wyglądać -

<link  href="styles.css" type="text/html" />
Sanjay Choubey
źródło
Wreszcie odpowiedź, która zadziałała dla mnie. Dziękuję Ci!
Richard Witherspoon,
4

W moim przypadku, gdy wdrażałem pakiet na żywo, wyjąłem go z publicznego folderu HTML. To było z jakiegoś powodu.

Ale najwyraźniej została aktywowana ścisła kontrola typu MIME i nie jestem zbyt pewna, czy jest po mojej stronie, czy przez firmę, z którą prowadzę hosting.

Ale gdy tylko przeniosłem folder stylizacji do tego samego katalogu, co plik index.php, przestałem otrzymywać błąd, a stylizacja została aktywowana idealnie.

Jabulani
źródło
4

Style ładowania początkowego nie ładują się # 3411

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

  1. Zainstalowałem Bootstrap v. 3.3.7

    npm install bootstrap --save
  2. Następnie dodałem potrzebne pliki skryptów do apps[0].scriptspliku angular-cli.json:

    "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. Zrestartowałem serw

To zadziałało dla mnie.

HSN KH
źródło
4

jeśli przeglądarka nie może znaleźć powiązanego pliku css, może dać ten błąd.

Jeśli używasz aplikacji Angular, nie musisz umieszczać ścieżki pliku css w pliku index.html

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

Możesz umieścić powiązaną ścieżkę pliku css do pliku styles.css.

@import "../node_modules/material-design-icons-iconfont/dist/material-design-icons.css";
Ahmet Arslan
źródło
To była dla mnie poprawka, usunęłem link href z index.html i użyłem metody importu w styles.scss.
IronWorkshop
3

Jednym z głównych powodów tego problemu jest to, że plik CSS, który próbuje załadować, nie jest prawidłowym plikiem CSS.

Przyczyny:

  • Nieprawidłowy typ MIME
  • Posiadanie kodu JavaScript w arkuszu stylów - (może wystąpić z powodu niepoprawnej konfiguracji programu pakującego Webpack)

Sprawdź, czy plik, który próbujesz załadować, jest prawidłowym arkuszem stylów CSS (pobierz adres URL serwera z karty sieciowej, wciśnij nową kartę i sprawdź).

Przydatne informacje do rozważenia przy użyciu <link> wewnątrz tagu body.

Chociaż umieszczenie linkznacznika w ciele nie jest standardowym sposobem używania znacznika. Ale możemy go użyć do optymalizacji strony (więcej informacji: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery ) / jeśli wymaga tego przypadek użycia biznesowego (gdy podajesz treść i serwer skonfigurowany do renderować stronę HTML z podaną zawartością).

Trzymając wewnątrz tagu ciała, musimy dodać atrybut itemPropertyw linktagu jak

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

Aby uzyskać więcej informacji itemProperty, zajrzyj do /webmasters/55130/can-i-use-link-tags-in-the-body-of-an-html-document .

BALA
źródło
3

wchodząc do konsoli przeglądarki> sieć> style.css ... kliknąłem ją i pokazałem „nie mogę uzyskać / path / to / my / CSS”, to powiedziało mi, że mój link jest nieprawidłowy. zmieniłem to na ścieżkę mojego pliku CSS.

Oryginalną ścieżką przed zmianą był localhost: 3000 / Example / public / style.css zmieniając go na localhost: 3000 / style.css rozwiązał go.

jeśli podajesz plik z app.use (express.static (path.join (__ katalog, „public”))); lub app.use (express.static („public”)); Twój serwer przekaże „ten folder” do przeglądarki, więc dodanie linku „/yourCssName.css” w przeglądarce go rozwiązuje

Dodając inne trasy w łączu CSS przeglądarki, powinieneś powiedzieć przeglądarce, aby szukała css w określonej trasie.

Podsumowując ... sprawdź, gdzie wskazuje link CSS przeglądarki.

bahri noredine
źródło
2

Jeśli ustawiasz Style w JavaScript jako:

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

Następnie wystarczy zmienić cssLint.type (oznaczony strzałką w powyższym opisie) na „MIME”:

   cssLink.type = "MIME";

Pomoże ci pozbyć się błędu.

Shriram
źródło
2

Ten problem występuje, gdy używasz narzędzia cli do Reactjs lub Angular, więc kluczem jest skopiowanie całej końcowej kompilacji z tych narzędzi, ponieważ inicjują one własne serwery Lite, które mylą Twoje adresy URL z serwerem zaplecza, który utworzyłeś ... weź cały folder kompilacji i zrzuć go do folderu zasobów projektu serwera zaplecza i odeślij go z serwera zaplecza, a nie serwera dostarczanego z Angular lub Reactjs. W przeciwnym razie używasz go jako interfejsu Serwer API

ndoty
źródło
2

Zetknąłem się z tym problemem, mając ten sam problem z dodawaniem niestandardowego wyglądu do przepływu użytkowników platformy Azure B2C. Odkryłem, że katalogiem głównym, do którego odwołuje się strona HTML, był ../oauth/v2 (tj. Ścieżka serwera oauth), a nie ścieżka do mojego magazynu bob.

Podanie pełnego adresu strony rozwiązało problem.

Liam
źródło
2

Sprawdź, czy masz włączoną lub wyłączoną kompresję. Jeśli go użyjesz lub ktoś go app.use(express.static(xxx))włączy, nie pomoże. Upewnij się, że twój serwer pozwala na kompresję.

Zacząłem widzieć podobny błąd, kiedy dodałem Brotli i wtyczki kompresujące do mojego pakietu WebPack. Następnie serwer musi obsługiwać również ten rodzaj kompresji treści.

Jeśli korzystasz z Express, następujące informacje powinny pomóc:

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

Moduł nazywa się: express-static-gzip

Moje ustawienia to:

const gzipOptions = {
  enableBrotli: true,
  customCompressions: [{
  encodingName: 'deflate',
  fileExtension: 'zz'
 }],
 orderPreference: ['br']
}
Greg Woz
źródło