ASP.NET Core Blazor izolace CSS

Od Dave Brock

Tento článek vysvětluje, jak izolace CSS omezuje CSS na komponenty Razor, které můžou zjednodušit CSS a vyhnout se kolizím s jinými komponentami nebo knihovnami.

Izolujte styly CSS na jednotlivé stránky, zobrazení a komponenty, abyste omezili nebo eliminovali:

• Závislosti na globálních stylech, jejichž údržba může být náročná
• Konflikty stylů ve vnořeném obsahu

Povolit izolaci CSS

Pokud chcete definovat styly specifické pro jednotlivé komponenty, vytvořte .razor.css soubor odpovídající názvu .razor souboru pro komponentu ve stejné složce. Soubor .razor.css je soubor CSS s omezeným rozsahem.

Pro komponentu Example v souboru Example.razor vytvořte soubor s názvem Example.razor.css vedle komponenty. Soubor Example.razor.css se musí nacházet ve stejné složce jako komponenta Example (Example.razor). Základní název souboru "Example" nerozlišuje velká a malá písmena.

Example.razor:

@page "/example"

<h1>Scoped CSS Example</h1>

Example.razor.css:

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

Styly definované v Example.razor.css se aplikují pouze na vykreslený výstup komponenty Example. Izolace CSS se aplikuje u elementů HTML v odpovídajícím Razor souboru. Jakékoli h1 deklarace šablon stylů CSS definované jinde v aplikaci nejsou v konfliktu se styly komponenty Example.

Poznámka

Aby se zajistila izolace stylu při sdružování, není import šablon stylů CSS v Razor blocích kódu podporován.

Sdružování izolace CSS

K izolaci CSS dochází v okamžiku sestavení. Blazor Přepíše selektory CSS tak, aby odpovídaly značkám vykresleným komponentou. Přepsané styly CSS jsou sloučené a vytvořené jako statický asset. Šablona stylů je uvedena uvnitř značky <head> (umístění obsahu <head>). <link> Následující prvek se přidá do aplikace vytvořené ze Blazor šablon projektu:

Blazor Web AppS:

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

Samostatné aplikace Blazor WebAssembly:

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

Zástupným {PACKAGE ID/ASSEMBLY NAME} symbolem je ID balíčku projektu (<PackageId> v souboru projektu) pro knihovnu nebo název sestavení aplikace.

V rámci přibaleného souboru je každá komponenta přidružena k identifikátoru rozsahu. Pro každou stylovanou komponentu je atribut HTML připojen s formátem b-{STRING}, kde zástupný symbol {STRING} je řetězec deseti znaků vygenerovaný frameworkem. Identifikátor je jedinečný pro každou aplikaci. V vykreslené Counter komponentě Blazor připojí identifikátor oboru k elementu h1 :

<h1 b-3xxtam6d07>

Soubor {PACKAGE ID/ASSEMBLY NAME}.styles.css používá identifikátor rozsahu k seskupení deklarace stylu s příslušnou komponentou. Následující příklad poskytuje styl pro předchozí <h1> prvek:

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

V době sestavení se vytvoří balíček projektu s konvencí obj/{CONFIGURATION}/{TARGET FRAMEWORK}/scopedcss/projectbundle/{PACKAGE ID/ASSEMBLY NAME}.bundle.scp.css, kde jsou zástupné symboly:

• {CONFIGURATION}: Konfigurace sestavení aplikace (například Debug, Release).
• {TARGET FRAMEWORK}: Cílový framework (například net6.0).
• {PACKAGE ID/ASSEMBLY NAME}: ID balíčku projektu (<PackageId> v souboru projektu) pro knihovnu nebo název sestavení aplikace (například BlazorSample).

Podpora podřazených komponent

Izolace CSS se vztahuje pouze na komponentu, kterou přidružíte k položce {COMPONENT NAME}.razor.css, kde zástupný symbol {COMPONENT NAME} je obvykle názvem komponenty. Chcete-li použít změny na podřízenou komponentu, použijte ::deeppseudo-element u všech podřízených prvků v souboru nadřazené komponenty .razor.css. Pseudo-element ::deep vybere prvky, které jsou potomky prvku s vygenerovaným identifikátorem oboru.

Následující příklad ukazuje nadřazenou komponentu s názvem Parent s podřízenou komponentou s názvem Child.

Parent.razor:

@page "/parent"

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

    <Child />
</div>

Child.razor:

<h1>Child Component</h1>

h1 Aktualizujte deklaraci Parent.razor.css pomocí pseudo-elementu ::deep, který označuje, že deklarace stylu h1 musí platit pro nadřazenou komponentu a její podřízené položky.

Parent.razor.css:

::deep h1 { 
    color: red;
}

Styl h1 se teď vztahuje na komponenty Parent a Child bez nutnosti vytvořit samostatný soubor CSS s vymezeným oborem pro podřízenou komponentu.

Pseudo-element ::deep funguje pouze s potomkovými elementy. Následující značkování aplikuje styly h1 na součásti podle očekávání. Identifikátor rozsahu nadřazené komponenty se použije u elementu div, takže prohlížeč ví, že dědí styly z nadřazené komponenty.

Parent.razor:

<div>
    <h1>Parent</h1>

    <Child />
</div>

Vynecháním prvku div však odeberete potomkový vztah. V následujícím příkladu se styl nepoužívá na podřízenou komponentu.

Parent.razor:

<h1>Parent</h1>

<Child />

Pseudo-element ::deep ovlivňuje, kde se atribut scope aplikuje na pravidlo. Když definujete pravidlo CSS v souboru CSS s vymezeným rozsahem, rozsah se použije na prvek zcela vpravo. Příklad: div > a je transformován na div > a[b-{STRING}], kde {STRING} zástupný symbol je řetězec deseti znaků vygenerovaný frameworkem (například b-3xxtam6d07). Pokud místo toho chcete, aby pravidlo platilo pro jiný selektor, ::deep pseudo-element vám to umožňuje. Například div ::deep > a se transformuje na div[b-{STRING}] > a (například div[b-3xxtam6d07] > a).

Možnost připojit ::deep pseudo-element k libovolnému prvku HTML umožňuje vytvořit vymezené styly CSS, které ovlivňují prvky vykreslené jinými komponentami, když můžete určit strukturu vykreslovaných značek HTML. U komponenty, která vykresluje tag odkazu (<a>) uvnitř jiné komponenty, zajistěte, aby byla komponenta zabalená do div (nebo jakéhokoli jiného elementu) a pomocí pravidla ::deep > a vytvořte styl, který se použije jenom u této komponenty, když se nadřazená komponenta vykresluje.

Důležité

Izolované styly CSS se vztahují pouze na elementy HTML a ne na komponenty nebo pomocníky tagů, včetně elementů s použitým pomocníkem tagu, například .

Podpora preprocesorů CSS

Preprocesory CSS jsou užitečné pro zlepšení vývoje šablon stylů CSS díky tomu, že umožňují využívat funkce, jako jsou proměnné, vnořování, moduly, mixiny nebo dědičnost. Izolace CSS sice nativně nepodporuje preprocesory CSS, jako jsou Sass nebo Less, ale integrace preprocesorů CSS je bezproblémová, pokud před Blazor přepsáním selektorů CSS během procesu sestavení dojde ke kompilaci preprocesoru. Pokud například používáte sadu Visual Studio, v Průzkumníku spouštěče úloh sady Visual Studio nakonfigurujte stávající předzpracovatelský krok kompilace jako úlohu Před sestavením.

Mnoho balíčků NuGet třetích stran, jako například AspNetCore.SassCompiler, může kompilovat soubory SASS/SCSS na začátku procesu sestavení předtím, než dojde k izolaci šablon stylů CSS.

Konfigurace izolace CSS

Izolace šablon stylů CSS je navržená tak, aby fungovala bez další konfigurace, ale poskytuje konfiguraci pro některé pokročilé scénáře, například pokud existují závislosti na existujících nástrojích nebo pracovních postupech.

Přizpůsobit formát identifikátoru oboru názvů

Identifikátory oboru používají formát b-{STRING}, kde zástupný symbol {STRING} je desetimístý řetězec vygenerovaný frameworkem. Pokud chcete formát identifikátoru oboru názvů upravit, aktualizujte soubor projektu s použitím požadovaného vzoru:

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

Ve výše uvedeném příkladu se v šablonách stylů CSS vygenerovaných pro Example.razor.css změní identifikátor rozsahu z b-{STRING} na custom-scope-identifier.

Pomocí identifikátorů rozsahu můžete dosáhnout dědičnosti u souborů CSS s omezeným rozsahem. V následujícím příkladu souboru projektu obsahuje soubor BaseComponent.razor.css společné styly napříč komponentami. Soubor DerivedComponent.razor.css tyto styly dědí.

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

Pokud chcete sdílet identifikátory oboru názvů mezi několika soubory, použijte operátor zástupného znaku (*):

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

Změna základní cesty ke statickým webovým prostředkům

Soubor scoped.styles.css se vygeneruje v kořenovém adresáři aplikace. V souboru projektu použijte vlastnost <StaticWebAssetBasePath> ke změně výchozí cesty. Následující příklad umístí scoped.styles.css soubor a zbytek prostředků aplikace na _content cestu:

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

Zakázat automatické slučování

Chcete-li zakázat, jak Blazor publikuje a načítá soubory s omezeným rozsahem za běhu, použijte vlastnost DisableScopedCssBundling. Při použití této vlastnosti to znamená, že za převzetí izolovaných souborů CSS z obj adresáře a publikování a jejich načítání za běhu zodpovídají jiné nástroje nebo procesy:

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

Zakázat izolaci CSS

Zakažte izolaci šablon stylů CSS pro projekt nastavením vlastnosti <ScopedCssEnabled> na false v souboru projektu aplikace:

<ScopedCssEnabled>false</ScopedCssEnabled>

Podpora Razor knihovny tříd (RCL)

Izolované styly komponent v balíčku NuGet nebo v knihovně tříd (RCL) se automaticky sbalí:

• Aplikace používá importy šablon stylů CSS k odkazu na styly obsažené v balíčku knihovny RCL. Pro knihovnu tříd pojmenovanou ClassLib a aplikaci Blazor se šablonou stylů BlazorSample.styles.css se šablona stylů seznamu RCL naimportuje v horní části šablony stylů aplikace:

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

• Přibalené styly RCL nejsou publikovány jako statický webový prostředek aplikace, která styly využívá.

Další informace o knihovnách tříd Razor najdete v následujících článcích:

• Využívání komponent ASP.NET Core Razor z knihovny tříd Razor (RCL)
• Opakovaně použitelné uživatelské rozhraní Razor v knihovnách tříd s využitím ASP.NET Core

Související obsah

• Razor Izolace CSS pro Pages
• Izolace CSS v MVC