Pourquoi les feuilles de style ne se chargent pas après le redémarrage de Visual Studio Code ?
Redémarrage du serveur Laravel
Term – php artisan serve
les feuilles de style ne se chargent pas après le redémarrage de Visual Studio Code dans un projet Laravel 11 ?
Plusieurs causes liées à la configuration de Vite, au cache ou à des erreurs de chemin.
1 – Vérifiez que le serveur Vite est exécuté
Laravel utilise Vite pour gérer les ressources front-end. Lorsque on redémarre VS Code, le serveur Vite ne s’exécute pas automatiquement.
Pour le démarrer le serveur Vite après chaque redémarrage :
Term – npm run dev
2 – Rechargez le navigateur ( F5) et vérifiez si les styles sont appliqués.
3 – Vérifiez les fichiers Blade
Les fichiers Blade doivent inclure correctement les styles via Vite.
Fichier – resources/views/layouts/app.blade.php ou le layout principal, dans :
<head>
<title>@yield(‘title’, ‘Laravel App’)</title>
@vite([‘resources/js/app.js’, ‘resources/css/app.css’])
</head>
4 – Vérifiez le chemin des fichiers dans Vite
Si les fichiers SCSS ou CSS ne se chargent pas, S’assurer que leur chemin est correctement configuré dans le fichier vite.config.js.
Exemple :
import { defineConfig } from ‘vite’;
import laravel from ‘laravel-vite-plugin’;
export default defineConfig({
plugins: [
laravel({
input: [‘resources/js/app.js’, ‘resources/sass/app.scss’],
refresh: true,
}),
],
});
5 – Exécuter :
Term – npm run dev
Afficher le lien vers le tableau de bord uniquement si l'utilisateur est connecté
Pour Afficher le lien vers le tableau de bord uniquement si l’utilisateur est connecté :
– Uutiliser le système d’authentification intégré de Laravel et la directive Blade @auth.
@auth <a href= »{{ url(‘/dashboard’) }} » class= »hlink »>Tableau de Bord</a> @endauth
Rappel :
@auth : Vérifie si un utilisateur est authentifié.
Si un utilisateur est connecté, le contenu à l’intérieur de @auth … @endauth sera affiché.
Si aucun utilisateur n’est connecté, ce lien ne sera pas visible.
Liens qui disparaissent lorsque l'utilisateur est connecté
Utiliser la directive Blade @guest, qui vérifie si l’utilisateur n’est pas authentifié.
@guest <a href= »{{ route(‘register’) }} » >Inscription</a> @endguest
Afficher les statistiques (nombre d'utilisateurs, liste des articles et des livres) sur une page
Pour afficher les statistiques (nombre d’utilisateurs, liste des articles , etc.) sur le tableau de bord :
Créer un DashboardController
Utilisez la commande :
Term – php artisan make:controller DashboardController
Cela génère un fichier dans ( app/Http/Controllers/DashboardController.php).
Modifiez le contrôleur de la page
Dans le contrôleur associé à la page (par exemple, DashboardController), récupérez les données nécessaires :
Exemple
namespace App\Http\Controllers;
use App\Models\User;
use App\Models\Article;
use App\Models\Book;
use Illuminate\Http\Request;
class DashboardController extends Controller
{
public function index()
{
// Compter les utilisateurs
$userCount = User::count();
// Récupérer la liste des articles
$articles = Article::all();
// Récupérer la liste des livres
$books = Book::all();
return view(‘dashboard.index’, compact(‘userCount’, ‘articles’, ‘books’));
}
}
Modifiez la route
Assurez-vous que la route du tableau de bord pointe vers la méthode index du DashboardController.
Exemple :
dans routes/web.php
use App\Http\Controllers\DashboardController;
Route::get(‘/dashboard’, [DashboardController::class, ‘index’])->middleware(‘auth’)->name(‘dashboard’);
Modifiez la vue du tableau de bord
Dans le fichier Blade du tableau de bord (resources/views/dashboard/index.blade.php), affichez les données :
Exemple :
@extends(‘layouts.app’)
@section(‘content’)
<div class= »container »>
<h1>Tableau de Bord</h1>
<div class= »stats »>
<h2>Statistiques</h2>
<p>Nombre d’utilisateurs : <strong>{{ $userCount }}</strong></p>
</div>
<div class= »articles »>
<h2>Liste des Articles</h2>
@if($articles->isEmpty())
<p>Aucun article disponible.</p>
@else
<ul>
@foreach($articles as $article)
<li>{{ $article->title }} – {{ $article->created_at->format(‘d/m/Y’) }}</li>
@endforeach
</ul>
@endif
</div>
<div class= »books »>
<h2>Liste des Livres</h2>
@if($books->isEmpty())
<p>Aucun livre disponible.</p>
@else
<ul>
@foreach($books as $book)
<li>{{ $book->nom }} – {{ $book->prix }} €</li>
@endforeach
</ul>
@endif
</div>
</div>
@endsection
Testez dans le navigateur