Wenn Sie eine Webanwendung auf einem Laravel-Framework entwickeln, möchten Sie wahrscheinlich CSS verwenden, um Ihre Website zu stylen. In diesem ausführlichen Tutorial werden wir uns die verschiedenen Möglichkeiten ansehen, CSS in Laravel zu verbinden und Ihnen bei der Auswahl des am besten geeigneten zu helfen.
Es gibt mehrere Möglichkeiten, CSS in Laravel zu verbinden. Eine der einfachsten Methoden besteht darin, die Inline-Befehle des Frameworks zu verwenden, um Stile zu verbinden. Sie können Links zu externen CSS-Dateien direkt in der Blade-Datei hinzufügen, die Ihre Webseite anzeigt. Dies ist besonders nützlich, wenn Sie nur für diese Seite spezifische Stile haben.
Sie können CSS auch mit der eingebauten Laravel- Mix-Funktion verbinden. Mit Mix können Sie Ihre CSS-Dateien kombinieren und minimieren, was die Leistung Ihrer Website verbessert. Sie können mix in einer Webpack-Datei verwenden.mix.js und dann den Befehl npm run dev aufrufen , um die Quelldateien in die endgültige CSS-Datei zu kompilieren.
Denken Sie unabhängig von der gewählten Methode daran, dass Sie Ihre CSS-Dateien im public-Unterverzeichnis Ihres Laravel-Projekts speichern sollten. Auf diese Weise können Sie über den öffentlichen Pfad auf sie zugreifen. Jetzt, da Sie mit den verschiedenen Möglichkeiten vertraut sind, CSS in Laravel zu verbinden, können Sie die bequemste und effizienteste Lösung für Ihr Projekt auswählen.
Wie verbinde ich CSS in Laravel
Die CSS-Verbindung in Laravel erfolgt über die Asset-Funktion, die einen URL-Verweis auf den Pfad zur CSS-Datei erstellt.
Erstellen Sie zunächst eine CSS-Datei im Ordner public/css , z. B. style.css .
Öffnen Sie dann die Vorlagendatei, in der Sie das CSS einbinden möchten, und verwenden Sie die Asset-Funktion, um einen URL-Link zur CSS-Datei zu erstellen:
>" rel="stylesheet">Die Funktion asset('css/style.css') erstellt einen URL-Verweis auf den Pfad public/css/style.css .
Jetzt wird die CSS-Datei erfolgreich mit Ihrer Laravel-Anwendung verknüpft und die Stile auf die entsprechenden Elemente auf der Webseite angewendet.
Schritt 1: Erstellen einer CSS-Datei
Es wird empfohlen, eine Datei mit Stilen im Verzeichnis "public/css" Ihres Laravel-Projekts zu erstellen. Mit diesem Ansatz können Sie Stile von anderen Dateien trennen und sicherstellen, dass sie verfügbar sind.
Beispielpfad zum Erstellen einer Datei mit Stilen in Laravel:
- Öffnen Sie den Ordner Ihres Laravel-Projekts
- Wechseln Sie zum Ordner "public"
- Erstellen Sie einen "css" -Ordner, wenn er noch nicht existiert
- Erstellen Sie im Ordner "css" eine neue Datei mit der Erweiterung ".css"
Ihre CSS-Datei ist bereit und einsatzbereit! Sie können jetzt Stile hinzufügen, die auf Ihr Laravel-Projekt angewendet werden.
Schritt 2: Platzieren der CSS-Datei
Normalerweise werden CSS-Dateien im Ordner public im Stammverzeichnis eines Laravel-Projekts abgelegt. Der öffentliche Ordner ist das Hauptverzeichnis zum Hosten statischer Dateien wie Bilder, JS- und CSS-Dateien. In diesem Ordner bedient Laravel automatisch alle Dateien, die über einen Webbrowser verfügbar sind.
Wenn Sie noch keinen öffentlichen Ordner im Stammverzeichnis eines Laravel-Projekts haben, erstellen Sie ihn manuell.
Sobald Sie einen öffentlichen Ordner haben, platzieren Sie Ihre CSS-Datei darin. Erstellen Sie beispielsweise einen CSS-Ordner und platzieren Sie die styles-Datei darin.css .
Styles-Datei.css ist jetzt über den folgenden Pfad vom Webbrowser aus zugänglich: http://yourdomain.com/css/styles.css wo yourdomain.com - ihre Domain. Sie können die Verfügbarkeit der Datei überprüfen, indem Sie diese Adresse einfach in Ihrem Webbrowser öffnen.
Nachdem Ihre CSS-Datei nun gehostet und über einen Webbrowser zugänglich ist, können Sie sie an die gewünschte Seite Ihres Laravel-Projekts anhängen. Verwenden Sie ein Tag mit den folgenden Attributen, um eine CSS-Datei zu verknüpfen:
- href - gibt den Pfad zu Ihrer CSS-Datei an;
- rel - definiert die Beziehung zwischen dem aktuellen Dokument und der Datei, auf die die attribuute href zeigt. Verwenden Sie in unserem Fall den Stylesheet- Wert, da wir eine Stylesheet- Datei anhängen;
- type - Gibt den Inhaltstyp der zu verbindenden Datei an. Verwenden Sie für CSS-Dateien den Text/CSS-Wert.
Beispielcode zum Anfügen einer CSS-Datei:
Fügen Sie diesen Code in das Tag Ihres HTML-Dokuments ein. Jetzt werden die in Ihrer CSS-Datei definierten Stile auf Ihre Laravel-Seite angewendet.
Schritt 3: Verbinden der CSS-Datei mit Laravel
Um eine CSS-Datei an Laravel anzuhängen, benötigen Sie einige Schritte:
- Erstellen Sie ein neues Verzeichnis im öffentlichen Ordner Ihres Laravel-Projekts. Nennen Sie es "css". In diesem Ordner wird Ihre CSS-Datei gespeichert.
- Legen Sie Ihre CSS-Datei in den gerade erstellten "css" -Ordner. Benennen Sie die Datei nach Ihren Wünschen, z. B. "styles.css".
- Öffnen Sie die App-Datei.blade.php" im Ordner "resources/views/layouts" Ihres Laravel-Projekts.
- Suchen Sie den Abschnitt " in der Datei "der app.blade.php" und fügen Sie den folgenden Code hinzu:
Beachten Sie, dass wir die Funktion "asset" verwenden, um den Pfad zu Ihrer CSS-Datei zu referenzieren. Es wird Laravel helfen, den Pfad auch während der Entwicklung und während der Bereitstellung der Site korrekt zu identifizieren.
Danach wird Ihre CSS-Datei an jede Seite Ihres Laravel-Projekts angehängt, die die Vorlage "app" verwendet.blade.php". Sie können Ihrer styles-Datei Ihre Stile hinzufügen.css" und sie werden auf Ihr Laravel-Projekt angewendet.
Schritt 4: Überprüfen der CSS-Verbindung
Nachdem Sie die CSS-Dateien erfolgreich mit Ihrem Laravel-Projekt verbunden haben, ist es wichtig zu überprüfen, ob sie tatsächlich funktionieren. In diesem Schritt werden wir uns einige Möglichkeiten ansehen, wie Sie Ihre CSS-Verbindung überprüfen können.
1. Öffnen Sie die Webseite, auf die Sie CSS-Stile anwenden möchten. Wenn das CSS erfolgreich verbunden wurde, sollten Sie sehen, dass die Stile auf Ihre Seite angewendet werden. Wenn Sie beispielsweise einen Stil hinzugefügt haben, um die Textfarbe zu ändern, stellen Sie sicher, dass sich der Text auf der Webseite entsprechend Ihrem CSS geändert hat.
2. Verwenden Sie die Webbrowser-Entwicklertools, um die CSS-Konnektivität zu überprüfen. Die meisten gängigen Browser wie Chrome, Firefox und Safari bieten Entwicklertools, mit denen Sie die Elemente einer Webseite und ihre angewendeten Stile überprüfen können. Öffnen Sie die Entwicklertools, suchen Sie auf der Webseite nach dem gewünschten Element, und stellen Sie sicher, dass die gewünschten Stile angewendet werden.
3. Überprüfen Sie den Code der HTML-Seite. Öffnen Sie den Quellcode der Webseite (normalerweise über das Kontextmenü der rechten Maustaste oder die Tastenkombination Strg+ U verfügbar) und stellen Sie sicher, dass die Pfade zu Ihren CSS-Dateien korrekt sind und mit Ihrer Seite verbunden sind. Wenn die Pfade falsch angegeben sind oder die Dateien nicht verbunden sind, müssen Sie diese Probleme beheben.
4. Überprüfen Sie die CSS-Verbindungsfehler in der Browserkonsole. Öffnen Sie die Webbrowser-Entwicklerkonsole (in der Regel über die Entwicklertools verfügbar) und überprüfen Sie, ob es Fehler gibt, die mit dem Verbinden von CSS-Dateien zusammenhängen. Wenn Fehler auftreten, lesen Sie die Beschreibung und beheben Sie das Problem.
Befolgen Sie diese Schritte, um zu überprüfen, ob die CSS-Dateien korrekt mit Ihrem Laravel-Projekt verbunden sind. Wenn etwas nicht funktioniert, überprüfen Sie die Dateipfade, deren Korrektheit und Fehler in der Browserkonsole. Haben Sie eine erfolgreiche CSS-Verbindung!
