Pracuję nad witryną, która używa gulp
do 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?
źródło
http://localhost:3000/assets/styles/custom-style.css
w nowej karcie.proxy.conf.json
konfiguracja 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.Odpowiedzi:
W przypadku aplikacji Node.js sprawdź swoją konfigurację:
Zauważ, że
/public
na końcu nie ma ukośnika, więc musisz uwzględnić go w opcji href HTML:Jeśli
/public/
dodałeś ukośnik ( ), możesz to zrobićhref="css/style.css"
.źródło
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.
źródło
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
ale plik CSS ma nazwę
style.css
(bez drugiego), istnieje duża szansa, że zobaczysz ten błąd.źródło
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: 404
z pewnąNot Found
zawartościąhtml
typu 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.źródło
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">
.źródło
Miałem ten błąd dla szablonu Bootstrap.
Następnie usunąłem
rel="stylesheet"
link, tj .:I wszystko działa dobrze. Wypróbuj to, jeśli korzystasz z szablonów Bootstrap.
źródło
rel
atrybutu po prostu usuwa funkcjonalność dołączania arkusza stylów.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.
źródł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ą
express
takich jak:Musisz poprawnie zaadresować pliki.
W moim przypadku oba były problemami, więc moje linki CSS poprzedziłem „/css/styles.css”.
Przykład:
To rozwiązanie jest idealne, ponieważ ścieżka jest głównym problemem dla CSS, który nie otrzymuje renderowania
źródło
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.
źródło
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.
źródło
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
źródło
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:
więc prostym rozwiązaniem było usunięcie tej,
.
ponieważ moja jest aplikacją jednostronicową .Lubię to:
więc zawsze rozwiązuje
/index.css
źródło
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:
Ale dla localhost musiałem pozbyć się slash:
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
rel
powinna ona wynosićstylesheet
np .:źródło
Wiem, że może to być poza kontekstem, ale połączenie nieistniejącego pliku może powodować ten problem, tak jak wcześniej.
Jeśli ten plik nie istnieje, napotkasz ten problem.
źródło
Miałem ten sam problem.
Jeśli struktura twojego projektu przypomina następujące drzewo:
Polecam dodać następujący fragment kodu
server.js
:Uwaga: Ścieżka jest wbudowanym modułem Node.js, więc nie trzeba instalować tego pakietu za pomocą npm.
źródło
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:
href
wewnątrz atrybut<link>
windex.html
musi byćapp/styles/style.css
i niestyles/style.css
źródło
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?
źródło
Jeśli używasz Express bez JS, spróbuj:
Na przykład mój plik CSS to
public/stylesheets/app.css
źródło
W przypadku aplikacji Node.js użyj tego po zaimportowaniu wszystkich wymaganych modułów z pliku serwera:
link rel="stylesheet" href="style.css">
źródło
Dostałem ten sam problem, a potem sprawdziłem, czy napisałem:
<base href="./">
w index.htmlPotem zmieniłem na
A potem działało dobrze.
źródło
Usuń rel = "stylesheet" i dodaj type = "text / html". Tak to będzie wyglądać -
źródło
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.
źródło
Style ładowania początkowego nie ładują się # 3411
https://github.com/angular/angular-cli/issues/3411
Zainstalowałem Bootstrap v. 3.3.7
Następnie dodałem potrzebne pliki skryptów do
apps[0].scripts
pliku angular-cli.json:Zrestartowałem serw
To zadziałało dla mnie.
źródło
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
Możesz umieścić powiązaną ścieżkę pliku css do pliku styles.css.
źródło
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:
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
link
znacznika 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
itemProperty
wlink
tagu jakAby uzyskać więcej informacji
itemProperty
, zajrzyj do /webmasters/55130/can-i-use-link-tags-in-the-body-of-an-html-document .źródło
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.
źródło
Jeśli ustawiasz Style w JavaScript jako:
Następnie wystarczy zmienić cssLint.type (oznaczony strzałką w powyższym opisie) na „MIME”:
Pomoże ci pozbyć się błędu.
źródło
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
źródło
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.
źródło
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:
źródło