CSS wird nicht geladen: Ursachen und einfache Lösungen
Wenn eine Website lokal nur schwarz auf weiß aussieht, fehlt meistens nicht der ganze Entwurf, sondern die Verbindung zur CSS-Datei.
Das Problem
CSS-Dateien liegen oft in Unterordnern wie css, assets oder dist. Wird nur die HTML-Datei verschickt, zeigen relative Pfade ins Leere. Auch Groß-/Kleinschreibung, führende Schrägstriche oder ein falscher Build-Ordner können verhindern, dass Styles geladen werden.
Einfache Lösung
- Öffnen Sie nicht nur die einzelne HTML-Datei, sondern den kompletten Website-Ordner oder das ZIP.
- Prüfen Sie im HTML die link-Tags mit rel="stylesheet" und vergleichen Sie die Pfade mit der Ordnerstruktur.
- Achten Sie auf exakte Schreibweise: style.css, Style.css und styles.css sind auf vielen Servern unterschiedliche Dateien.
- Wenn ein Quellprojekt mit package.json vorliegt, lassen Sie zuerst den fertigen Build-Ordner erzeugen.
- Nutzen Sie den Prüfbericht, um fehlende Dateien sichtbar zu machen.
Typische Fehler
- Nur index.html weitergeben, aber assets/style.css vergessen.
- Pfade vom eigenen Rechner wie C:\Users\... oder /Users/... verwenden.
- CSS aus einem Vite-, React- oder Next-Projekt erwarten, obwohl noch kein Build erstellt wurde.
- Dateinamen nach dem Export umbenennen, ohne die HTML-Links anzupassen.
Checkliste
- Kompletter Export-Ordner vorhanden
- CSS-Dateien im ZIP enthalten
- Pfade relativ und korrekt geschrieben
- Keine lokalen Rechnerpfade
- Startseite im richtigen Ordner geöffnet
- Mobile Ansicht nach CSS-Fix prüfen
FAQ
Warum sieht meine HTML-Datei ohne CSS aus?
Meistens findet der Browser die verlinkte CSS-Datei nicht. Die HTML-Datei selbst ist lesbar, aber das Design liegt in einer anderen Datei.
Kann SitePreviewKit CSS reparieren?
SitePreviewKit zeigt fehlende Dateien und Pfade als technische Hinweise. Die eigentliche Korrektur muss im Projekt oder Export erfolgen.
Ist ein absoluter Pfad schlecht?
Für lokale Übergaben und statische Websites sind relative Pfade meist robuster, weil sie mit dem Ordner mitwandern.