Dall'archivio script > ASP.NET Core

Gestione CSS in Blazor con .NET 9

di Morgan PizziniMorgan Pizzini, in ASP.NET Core,

Nel moderno sviluppo web, garantire che gli utenti ricevano sempre le versioni aggiornate di fogli di stile è fondamentale. Con .NET 9, Blazor offre nuove funzionalità per gestire efficacemente il caching dei CSS, semplificando il processo per gli sviluppatori.

Una pratica comune per forzare il browser a caricare la versione più recente di un file CSS è aggiungere una query string al nome del file, come nell'esempio seguente:

<head>
  <link href="css/app.css?version=2" rel="stylesheet" />
</head>

Questo metodo richiede di aggiornare manualmente il numero di versione ad ogni modifica, il che può essere facilmente dimenticato, specialmente in team di sviluppo con più membri.

Blazor introduce un middleware per la gestione avanzata dei file statici che automatizza questo processo. Per implementarlo, è necessario configurare l'applicazione nel file Program.cs:

// Rimozione chiamata UseStaticFiles
// app.UseStaticFiles();

app.MapStaticAssets();

Successivamente, nel file App.razor, aggiorniamo il riferimento al foglio di stile utilizzando la nuova direttiva @Assets

<head>
  <!-- <link rel="stylesheet" href="app.css" /> -->
  <link rel="stylesheet" href="@Assets["app.css"]" />
</head>

Questa configurazione consente a Blazor di generare automaticamente un nome di file univoco basato sul contenuto del CSS, garantendo che gli utenti ricevano sempre la versione più recente senza interventi manuali.

Commenti

Visualizza/aggiungi commenti

| Condividi su: LinkedIn, Facebook
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi