Arkusz stylów nie ładowany z powodu typu MIME

Dla Węzła.aplikacje js, sprawdź swoją konfigurację:

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

Zauważ, że /public nie ma ukośnika na końcu, więc musisz umieścić go w opcji href twojego HTML:

href="/css/style.css">

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

Ten błąd może również wystąpić, gdy nie odnosisz się poprawnie do pliku CSS.

Na przykład, jeśli twój tag linku to

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

Ale twój plik CSS ma nazwę style.css (bez drugich s), wtedy jest duża szansa, że zobaczysz ten błąd.

W większości przypadków może to być po prostu ścieżka pliku CSS jest błędna . Tak więc serwer WWW zwraca {[0] } z pewną zawartością {[1] } typu html.

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

Utwórz folder poniżej / powyżej stylu.plik css zgodnie ze strukturą kątową i podaj link w stylu <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">

Potem usunąłem rel="stylesheet" z linku, czyli:

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

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

Komentarze w Twoim pliku to potkną. niektóre minifiery nie usuwają komentarzy.

również

Jeśli używasz Node.js i ustaw swoje pliki statyczne używając express np.:

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

Musisz poprawnie adresować pliki.

W moim przypadku oba były problemem, więc moje linki CSS prefiksem " / 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 nie dostającego renderowania

Po prostu odwołałem się do pliku CSS (Angular theme w moim przypadku) w sekcji styles mojej konfiguracji Angular 6 build w angular.json:

To nie odpowiada na pytanie, ale może to być odpowiednie obejście, tak jak dla mnie.

Wiem, że to może być poza kontekstem, ale powiązanie nieistniejącego pliku może spowodować ten problem, tak jak mi się to zdarzyło wcześniej.

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

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

Jak wspomniano rozwiązania 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, sprawdź tę odpowiedź:

Gdy wdrażasz ścieżkę nie-root w domenie, musisz ręcznie zaktualizować znacznik <base href="/"> w swoim dist/index.html.

W tym przypadku musisz zaktualizować do <base href="/sub-folder/">

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

Mój problem polega na tym, że używałem webpacka i w moim linku HTML CSS miałem względną ścieżkę, i za każdym razem, gdy przechodziłem do zagnieżdżonej strony, to rozwiązywałem niewłaściwą ścieżkę:

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

Więc prostym rozwiązaniem było usunięcie ., ponieważ mój jest jednostronicową aplikacją .

Tak:

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

Więc zawsze rozwiązuje się /index.css

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

To działało dobrze online:

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

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

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

Więc wzmacniam kilka odpowiedzi podanych tutaj już - prawdopodobnie będzie to błąd ścieżki lub ortografii, a nie jakikolwiek skomplikowany problem z konfiguracją serwera. Błąd w konsoli to czerwony śledź; Karta sieciowa musi być najpierw sprawdzona dla 404.

Wśród odpowiedzi podane tutaj to kilka rozwiązań, które nie są poprawne. Dodanie type="text/html" lub zmiana href na src nie jest odpowiedzią.

Jeśli chcesz, aby wszystkie atrybuty były walidowane na najbardziej wybranych walidatorach i Twoim IDE, należy podać wartość nośnika, a {[6] } powinno być stylesheet, np.:

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

Dostałem ten sam problem i sprawdziłem, że napisałem:

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

Potem zmieniłem na

<base href="/">

Miałem ten sam problem.

Jeśli struktura twojego projektu jest podobna do następującego drzewa:

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

Polecam dodać następujący fragment kodu w 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 węzłem.moduł js, więc nie trzeba instalować tego pakietu przez npm.

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

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

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

Atrybut href wewnątrz <link> w index.html musi być app/styles/style.css a nie styles/style.css

Możesz otworzyć Narzędzia Google Chrome, wybrać kartę Sieć, przeładować stronę i znaleźć żądanie pliku CSS i poszukać tego, co ma wewnątrz pliku.

Może zrobiłeś coś złego, gdy połączyłeś dwie biblioteki w swoim pliku, w tym niektóre znaki lub nagłówki nie pasujące do CSS?

W przypadku, gdy używasz Express bez JS spróbuj z:

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

Jako przykład, mój plik CSS znajduje się w public/stylesheets/app.css

Wchodząc do konsoli przeglądarki > sieć > styl.css ...kliknąłem na niego i pokazał "nie można dostać / ścieżka / do/mój / CSS", to powiedział mi mój link był zły. zmieniłem to na ścieżkę mojego pliku CSS.

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

Jeśli podajesz Plik z aplikacji.użycie (wym.statyczna (ścieżkajoin (__dirname, "public"))); lub app.użycie (wym.static ("public")); Twój serwer przejdzie "that folder" to the browser so adding a " / yourCssName.css " link w przeglądarce rozwiązuje to

Dodając inne trasy w linku CSS przeglądarki, będziesz kazał przeglądarce szukać css w podanej trasie.

W podsumowaniu... sprawdź, gdzie link CSS Twojej przeglądarki wskazuje.

Oprócz użycia:

<base href="/">

Usuń również rel="stylesheet" część z linków css:

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

Dla węzła.aplikacja js, wystarczy użyć tego po zaimportowaniu wszystkich wymaganych modułów w pliku serwera:

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

• express.statyczna wbudowana funkcja middleware w Express i to w Twoim .plik html: link rel="stylesheet" href="style.css">

Usuń rel="arkusz stylów" i dodaj type = "text / html". Więc będzie to wyglądało tak -

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

W moim przypadku, gdy instalowałem pakiet na żywo, miałem go poza publicznym folderem HTML. Nie bez powodu.

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

Ale jak tylko przeniosłem folder stylizacji w tym samym katalogu co indeks.plik php przestałem dostawać błąd, a stylizacja została aktywowana idealnie.

Style Bootstrap 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].scripts w angular-cli.plik 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. I restarted ng serve

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

Jeśli używasz aplikacji Angular nie musisz umieszczać ścieżki pliku css na indeksie.html

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

Możesz umieścić powiązaną ścieżkę pliku css na stylach.plik css.

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

Pracowałem z aplikacją React.js i również miałem ten błąd, który doprowadził mnie tutaj. To mi pomogło. Zamiast dodawać <link> do index.html dodałem import do komponentu, w którym muszę użyć tego arkusza stylów:

import 'path/to/stylesheet.css';

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

Przyczyny:

• nieprawidłowy typ MIME
[10]} posiadanie kodu JavaScript w arkuszu stylów - (może wystąpić z powodu nieprawidłowej konfiguracji pakietu Webpack bundler)

Sprawdź plik, który próbujesz załadować, jest prawidłowym arkuszem stylów CSS(Pobierz adres URL serwera pliku z karty Sieć i naciśnij nową kartę i zweryfikuj).

Przydatne informacje do rozważenia podczas używania wewnątrz tagu body.

Chociaż posiadanie znacznika link wewnątrz ciała nie jest standardowym sposobem użycia 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 biznesowy przypadek użycia (kiedy serwujesz treść i serwer skonfigurowany tak, aby musiał renderować stronę HTML z dostarczoną treścią).

Trzymając wewnątrz znacznika body musimy dodać atrybut {[2] } w znaczniku link Jak

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

Aby uzyskać więcej informacji na temat itemProperty zajrzyj do https://webmasters.stackexchange.com/questions/55130/can-i-use-link-tags-in-the-body-of-an-html-document.

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

To po prostu zmień cssLint.Typ (oznaczony strzałką w powyższym opisie) do "MIME":

   cssLink.type = "MIME";

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

Ten problem występuje, gdy używasz narzędzia cli dla reactjs lub angular, kluczem jest skopiowanie całej ostatecznej kompilacji z tych narzędzi, ponieważ inicjują one własne serwery lite, które mylą Twoje adresy URL z utworzonym serwerem zaplecza... weź ten cały folder kompilacji i zrzut go w folderze zasobów projektu serwera zaplecza i ref je z serwera back-end, a nie serwera, który wysyła z Angular lub Reactjs inaczej używasz go jako front-end z określonego API Serwer