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

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?

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".

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.

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.

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.

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">.

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.

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.

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

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:

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

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" >

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

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

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">

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.

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.

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

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?

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

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">

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.

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

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

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.

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.

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";

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 .

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.

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.

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

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.

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']
}