Dela via

ASP.NET Core CSS-isolering Blazor

Anmärkning

Det här är inte den senaste versionen av den här artikeln. För den nuvarande utgåvan, se .NET 9-versionen av den här artikeln .

Varning

Den här versionen av ASP.NET Core stöds inte längre. Mer information finns i supportpolicyn för .NET och .NET Core. För den nuvarande utgåvan, se .NET 9-versionen av den här artikeln .

Viktigt!

Den här informationen gäller en förhandsversionsprodukt som kan ändras avsevärt innan den släpps kommersiellt. Microsoft lämnar inga garantier, uttryckliga eller underförstådda, med avseende på den information som tillhandahålls här.

För den nuvarande utgåvan, se .NET 9-versionen av den här artikeln .

Av Dave Brock

Den här artikeln beskriver hur CSS-isolering omfattar CSS för Razor komponenter, vilket kan förenkla CSS och undvika kollisioner med andra komponenter eller bibliotek.

Isolera CSS-format på enskilda sidor, vyer och komponenter för att minska eller undvika:

  • Beroenden på globala format som kan vara svåra att underhålla.
  • Formatkonflikter i kapslat innehåll.

Aktivera CSS-isolering

Om du vill definiera komponentspecifika format skapar du en .razor.css fil som matchar namnet på .razor filen för komponenten i samma mapp. Filen .razor.css är en scoped CSS-fil.

För en Example komponent i en Example.razor fil skapar du en fil tillsammans med komponenten med namnet Example.razor.css. Filen Example.razor.css måste finnas i samma mapp som komponenten Example (Example.razor). Basnamnet "Example" för filen är inte skiftlägeskänsligt.

Example.razor:

@page "/example"

<h1>Scoped CSS Example</h1>

Example.razor.css:

h1 { 
    color: brown;
    font-family: Tahoma, Geneva, Verdana, sans-serif;
}

Formatmallarna som definieras i Example.razor.css tillämpas endast på komponentens Example renderade utdata. CSS-isolering tillämpas på HTML-element i matchande Razor fil. Css-deklarationer h1 som definierats någon annanstans i appen står inte i konflikt med komponentens Example formatmallar.

Anmärkning

För att garantera formatisolering när paketering sker stöds inte import av CSS i Razor kodblock.

CSS-isoleringspaketering

CSS-isolering sker vid byggtiden. Blazor skriver om CSS-väljare för att matcha markering som återges av komponenten. De omskrivna CSS-formaten paketeras och skapas som en statisk tillgång. Formatmallen refereras till i taggen <head> (plats för <head> innehåll). Följande <link> element läggs till i en app som skapats från Blazor projektmallarna:

Blazor Web Apps:

<link href="@Assets["{PACKAGE ID/ASSEMBLY NAME}.styles.css"]" rel="stylesheet">

Fristående Blazor WebAssembly appar:

<link href="{PACKAGE ID/ASSEMBLY NAME}.styles.css" rel="stylesheet">

<link href="{PACKAGE ID/ASSEMBLY NAME}.styles.css" rel="stylesheet">

Platshållaren {PACKAGE ID/ASSEMBLY NAME} är projektets paket-ID (<PackageId> i projektfilen) för ett bibliotek eller sammansättningsnamn för en app.

Följande exempel kommer från en värdbaserad Blazor WebAssemblyClient app. Appens sammansättningsnamn är BlazorSample.Client, och <link> läggs till av Blazor WebAssembly projektmallen när projektet skapas med alternativet Värdbaserad (-ho|--hosted-alternativet med .NET CLI eller kryssrutan ASP.NET Core Hosted med Visual Studio):

<link href="BlazorSample.Client.styles.css" rel="stylesheet">

I den paketerade filen associeras varje komponent med en omfångsidentifierare. För varje formaterad komponent läggs ett HTML-attribut till med formatet b-{STRING}, där {STRING} platshållaren är en sträng med tio tecken som genereras av ramverket. Identifieraren är unik för varje app. I den renderade Counter-komponenten lägger Blazor till en omfångsidentifierare till h1-elementet:

<h1 b-3xxtam6d07>

Filen {PACKAGE ID/ASSEMBLY NAME}.styles.css använder omfångsidentifieraren för att gruppera en formatdeklaration med komponenten. I följande exempel visas formatet för föregående <h1> element:

/* /Components/Pages/Counter.razor.rz.scp.css */
h1[b-3xxtam6d07] {
    color: brown;
}

Vid bygget skapas ett projektpaket med konventionen obj/{CONFIGURATION}/{TARGET FRAMEWORK}/scopedcss/projectbundle/{PACKAGE ID/ASSEMBLY NAME}.bundle.scp.css, där platshållarna är:

  • {CONFIGURATION}: Appens byggkonfiguration (till exempel Debug, Release).
  • {TARGET FRAMEWORK}: Målramverket (till exempel net6.0).
  • {PACKAGE ID/ASSEMBLY NAME}: Projektets paket-ID (<PackageId> i projektfilen) för ett bibliotek eller sammansättningsnamn för en app (till exempel BlazorSample).

Stöd för underordnade komponenter

CSS-isolering gäller endast för den komponent som du associerar med formatet {COMPONENT NAME}.razor.css, där {COMPONENT NAME} platshållaren vanligtvis är komponentnamnet. Om du vill tillämpa ändringar på en underordnad ::deep komponent använder du pseudoelementet för underordnade element i den överordnade komponentens .razor.css fil. Pseudoelementet ::deep väljer element som är underordnade elementets genererade omfångsidentifierare.

I följande exempel visas en överordnad komponent med namnet Parent med en underordnad komponent med namnet Child.

Parent.razor:

@page "/parent"

<div>
    <h1>Parent component</h1>

    <Child />
</div>

Child.razor:

<h1>Child Component</h1>

Uppdatera deklarationen h1 i Parent.razor.css med ::deep pseudoelementet för att ange att formatdeklarationen h1 måste gälla för den överordnade komponenten och dess underordnade objekt.

Parent.razor.css:

::deep h1 { 
    color: red;
}

Formatet h1 gäller nu för komponenterna Parent och Child utan att du behöver skapa en separat CSS-fil med omfång för den underordnade komponenten.

Pseudoelementet ::deep fungerar bara med underordnade element. Följande markering tillämpar C0-stilarna på komponenter som förväntat. Den överordnade komponentens omfångsidentifierare tillämpas på elementet div , så webbläsaren vet att den ärver formatmallar från den överordnade komponenten.

Parent.razor:

<div>
    <h1>Parent</h1>

    <Child />
</div>

Genom att exkludera elementet div tas den underordnade relationen bort. I följande exempel tillämpas inte stilen på den underordnade komponenten.

Parent.razor:

<h1>Parent</h1>

<Child />

Pseudoelementet ::deep påverkar var omfångsattributet tillämpas på regeln. När du definierar en CSS-regel i en omfångsbegränsad CSS-fil tillämpas omfånget på det element som ligger längst till höger. Exempel: div > a transformeras till div > a[b-{STRING}], där {STRING} platshållaren är en sträng med tio tecken som genereras av ramverket (till exempel b-3xxtam6d07). Om du i stället vill att regeln ska gälla för en annan väljare kan ::deep du göra det med pseudoelementet. Till exempel omvandlas div ::deep > a till div[b-{STRING}] > a (till exempel div[b-3xxtam6d07] > a).

Möjligheten att koppla ::deep pseudoelementet till ett HTML-element gör att du kan skapa begränsade CSS-format som påverkar element som återges av andra komponenter när du kan fastställa strukturen för de renderade HTML-taggarna. För en komponent som renderar en hyperlänktagg (<a>) inuti en annan komponent kontrollerar du att komponenten är omsluten i ett div (eller något annat element) och använder regeln ::deep > a för att skapa ett format som endast tillämpas på komponenten när den överordnade komponenten återges.

Viktigt!

Begränsad CSS gäller endast HTML-element och inte för Razor komponenter eller Tag Helpers, inklusive element med en Tag Helper tillämpad, till exempel <input asp-for="..." />.

Stöd för CSS-förprocessor

CSS-förprocessorer är användbara för att förbättra CSS-utvecklingen genom att använda funktioner som variabler, kapsling, moduler, mixins och arv. Även om CSS-isolering inte har inbyggt stöd för CSS-förprocessorer som Sass eller Less, är integreringen av CSS-förprocessorer sömlös så länge förprocessorkompilering sker innan Blazor CSS-väljare skrivs om under byggprocessen. Med Visual Studio kan du till exempel konfigurera befintlig förprocessorkompilering som en Before Build-uppgift i Visual Studio Task Runner Explorer.

Många NuGet-paket från tredje part, till exempel AspNetCore.SassCompiler, kan kompilera SASS/SCSS-filer i början av byggprocessen innan CSS-isolering sker.

CSS-isoleringskonfiguration

CSS-isolering är utformat för att fungera direkt, men tillhandahåller konfiguration för vissa avancerade scenarier, till exempel när det finns beroenden på befintliga verktyg eller arbetsflöden.

Anpassa omfångsidentifierarformat

Omfångsidentifierare använder formatet b-{STRING}, där {STRING} platshållaren är en sträng med tio tecken som genereras av ramverket. Om du vill anpassa omfångsidentifierarformatet uppdaterar du projektfilen till ett önskat mönster:

<ItemGroup>
  <None Update="Components/Pages/Example.razor.css" CssScope="custom-scope-identifier" />
</ItemGroup>

I föregående exempel ändrar CSS som genererats för Example.razor.css dess omfångsidentifierare från b-{STRING} till custom-scope-identifier.

Använd omfångsidentifierare för att uppnå arv med begränsade CSS-filer. I följande projektfilexempel innehåller en BaseComponent.razor.css fil vanliga format för komponenter. En DerivedComponent.razor.css fil ärver dessa formatmallar.

<ItemGroup>
  <None Update="Components/Pages/BaseComponent.razor.css" CssScope="custom-scope-identifier" />
  <None Update="Components/Pages/DerivedComponent.razor.css" CssScope="custom-scope-identifier" />
</ItemGroup>

Använd jokertecknet (*) för att dela omfångsidentifierare i flera filer:

<ItemGroup>
  <None Update="Components/Pages/*.razor.css" CssScope="custom-scope-identifier" />
</ItemGroup>

Omfångsidentifierare använder formatet b-{STRING}, där {STRING} platshållaren är en sträng med tio tecken som genereras av ramverket. Om du vill anpassa omfångsidentifierarformatet uppdaterar du projektfilen till ett önskat mönster:

<ItemGroup>
  <None Update="Pages/Example.razor.css" CssScope="custom-scope-identifier" />
</ItemGroup>

I föregående exempel ändrar CSS som genererats för Example.razor.css dess omfångsidentifierare från b-{STRING} till custom-scope-identifier.

Använd omfångsidentifierare för att uppnå arv med begränsade CSS-filer. I följande projektfilexempel innehåller en BaseComponent.razor.css fil vanliga format för komponenter. En DerivedComponent.razor.css fil ärver dessa formatmallar.

<ItemGroup>
  <None Update="Pages/BaseComponent.razor.css" CssScope="custom-scope-identifier" />
  <None Update="Pages/DerivedComponent.razor.css" CssScope="custom-scope-identifier" />
</ItemGroup>

Använd jokertecknet (*) för att dela omfångsidentifierare i flera filer:

<ItemGroup>
  <None Update="Pages/*.razor.css" CssScope="custom-scope-identifier" />
</ItemGroup>

Ändra bassökväg för statiska webbtillgångar

Filen scoped.styles.css genereras i appens rot. I projektfilen använder du <StaticWebAssetBasePath> egenskapen för att ändra standardsökvägen. I följande exempel placeras filen scoped.styles.css och resten av appens resurser på sökvägen _content.

<PropertyGroup>
  <StaticWebAssetBasePath>_content/$(PackageId)</StaticWebAssetBasePath>
</PropertyGroup>

Inaktivera automatisk paketering

Vill du avaktivera hur Blazor publicerar och laddar begränsade filer vid körning, använd egenskapen DisableScopedCssBundling. När du använder den här egenskapen innebär det att andra verktyg eller processer ansvarar för att ta de isolerade CSS-filerna från obj katalogen och publicera och läsa in dem vid körning:

<PropertyGroup>
  <DisableScopedCssBundling>true</DisableScopedCssBundling>
</PropertyGroup>

Inaktivera CSS-isolering

Inaktivera CSS-isolering för ett projekt genom att ange <ScopedCssEnabled> egenskapen till false i appens projektfil:

<ScopedCssEnabled>false</ScopedCssEnabled>

Razor stöd för klassbibliotek (RCL)

Isolerade format för komponenter i ett NuGet-paket eller Razor klassbibliotek (RCL) paketeras automatiskt:

  • Appen använder CSS-importer för att referera till RCL:s paketerade formatmallar. För ett klassbibliotek med namnet ClassLib och en Blazor app med en BlazorSample.styles.css formatmall importeras RCL:s formatmall högst upp i appens formatmall:

    @import '_content/ClassLib/ClassLib.bundle.scp.css';

  • RCL:s paketerade formatmallar publiceras inte som en statisk webbtillgång för appen som använder formatmallarna.

Mer information om RCL:er finns i följande artiklar:

Ytterligare resurser