Blazor izolace základní šablon stylů CSS ASP.NET

  • Článek

Poznámka:

Toto není nejnovější verze tohoto článku. Aktuální verzi najdete ve verzi .NET 8 tohoto článku.

Důležité

Tyto informace se týkají předběžného vydání produktu, který může být podstatně změněn před komerčním vydáním. Microsoft neposkytuje žádné záruky, výslovné ani předpokládané, týkající se zde uváděných informací.

Aktuální verzi najdete ve verzi .NET 8 tohoto článku.

Autor: Dave Brock

Tento článek vysvětluje, jak izolace CSS obory CSS na Razor komponenty, 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

Povolení izolace šablon stylů 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 vymezený soubor CSS.

Example Pro komponentu Example.razor v souboru vytvořte soubor společně s komponentou s názvem Example.razor.css. Soubor Example.razor.css se musí nacházet ve stejné složce jako Example součást (Example.razor). ExampleZákladní název souboru 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 použijí pouze na vykreslený výstup Example komponenty. Izolace CSS se použije 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 Example styly komponent.

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 šablon stylů CSS

K izolaci šablon stylů CSS dochází v okamžiku sestavení. Blazor Přepíše selektory CSS tak, aby odpovídaly revizím vykresleným komponentou. Přepsané styly CSS jsou seskupené a vytvořené jako statický prostředek. Šablona stylů se odkazuje uvnitř <head> značky (umístění <head> obsahu). Následující <link> prvek se ve výchozím nastavení přidá do aplikace vytvořené ze Blazor šablon projektu, kde zástupný symbol {ASSEMBLY NAME} je název sestavení projektu:

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

Následující příklad pochází z hostované Blazor WebAssemblyClient aplikace. Název sestavení aplikace je BlazorSample.Clienta <link> šablona projektu se přidá Blazor WebAssembly při vytvoření projektu s možností Hostovaná (-ho|--hosted možnost pomocí rozhraní příkazového řádku .NET nebo ASP.NET Core hostovaného pomocí sady Visual Studio):

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

V rámci balíčku souboru je každá komponenta přidružena k identifikátoru oboru. Pro každou stylovanou komponentu je atribut HTML připojen s formátem b-{STRING}, kde {STRING} zástupný symbol je řetězec deseti znaků vygenerovaný architekturou. 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 {ASSEMBLY NAME}.styles.css používá identifikátor oboru k seskupení deklarace stylu s jeho 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ří sada projektu s konvencí obj/{CONFIGURATION}/{TARGET FRAMEWORK}/scopedcss/projectbundle/{ASSEMBLY NAME}.bundle.scp.css, kde jsou zástupné symboly:

  • {CONFIGURATION}: Konfigurace sestavení aplikace (například Debug, Release).
  • {TARGET FRAMEWORK}: Cílová architektura (například net6.0).
  • {ASSEMBLY NAME}: Název sestavení aplikace (například BlazorSample).

Podpora podřízených komponent

Ve výchozím nastavení se izolace CSS vztahuje pouze na komponentu, kterou přidružíte k formátu {COMPONENT NAME}.razor.css, kde zástupný symbol {COMPONENT NAME} je obvykle název komponenty. Chcete-li použít změny na podřízenou komponentu, použijte ::deeppseudo-element na všechny následné prvky v souboru nadřazené komponenty .razor.css . Pseudo-element ::deep vybere prvky, které jsou potomky vygenerovaného identifikátoru oboru prvku.

Následující příklad ukazuje nadřazenou komponentu volanou 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í ::deep pseudo-elementu, který označuje h1 deklaraci stylu 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 Parent komponenty a Child bez nutnosti vytvořit samostatný soubor CSS s vymezeným oborem pro podřízenou komponentu.

Pseudo-element ::deep funguje pouze s následníky elementy. Následující kód použije styly h1 na součásti podle očekávání. Identifikátor oboru 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>

Vyloučením elementu div však odeberete potomkový vztah. V následujícím příkladu se styl nepoužije na podřízenou komponentu.

Parent.razor:

<h1>Parent</h1>

<Child />

Pseudo-element ::deep ovlivňuje, kde je atribut oboru použit na pravidlo. Když definujete pravidlo CSS v souboru CSS s vymezeným oborem, obor se ve výchozím nastavení použije na správnou většinu elementů. Příklad: div > a je transformován na div > a[b-{STRING}], kde {STRING} zástupný symbol je řetězec deseti znaků vygenerovaný architekturou (například b-3xxtam6d07). Pokud místo toho chcete, aby pravidlo platilo pro jiný selektor, ::deep pseudo-element 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 pseudo-element k libovolnému ::deep elementu 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 značku hypertextového 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é

Vymezený šablony stylů CSS se vztahuje pouze na elementy HTML, nikoli Razor na součásti nebo pomocné rutiny značek, včetně prvků s použitým pomocným rutinou značky, například <input asp-for="..." />.

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 šablon stylů 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 k kompilaci preprocesoru. Pokud například používáte sadu Visual Studio, v Průzkumníku spouštěče úloh sady Visual Studio nakonfigurujte kompilaci stávajícího preprocesoru jako úlohu Před sestavením.

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

Konfigurace izolace šablon stylů CSS

Izolace šablon stylů CSS je navržená tak, aby fungovala bez použití, 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.

Úprava formátu identifikátoru oboru

Ve výchozím nastavení jsou identifikátory oboru ve formátu b-{STRING}, kde zástupný symbol {STRING} je řetězec 10 znaků vygenerovaný architekturou. Pokud chcete formát identifikátoru oboru 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 soubor Example.razor.css změní identifikátor oboru z formátu b-{STRING} na custom-scope-identifier.

Pomocí identifikátorů oboru můžete dosáhnout dědičnosti u souborů CSS s vymezeným oborem. V následujícím příkladu BaseComponent.razor.css souboru projektu soubor obsahuje 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 mezi několika soubory, použijte operátor zástupného znaku (*):

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

Ve výchozím nastavení jsou identifikátory oboru ve formátu b-{STRING}, kde zástupný symbol {STRING} je řetězec 10 znaků vygenerovaný architekturou. Pokud chcete formát identifikátoru oboru upravit, aktualizujte soubor projektu s použitím požadovaného vzoru:

<ItemGroup>
  <None Update="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 soubor Example.razor.css změní identifikátor oboru z formátu b-{STRING} na custom-scope-identifier.

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

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

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

<ItemGroup>
  <None Update="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 <StaticWebAssetBasePath> vlastnost 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ázání automatického sdružování

Pokud chcete vyjádřit výslovný nesouhlas s tím, jak Blazor publikuje a načítá soubory s vymezeným oborem za běhu, použijte DisableScopedCssBundling tuto vlastnost. 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ázání izolace šablon stylů CSS

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

<ScopedCssEnabled>false</ScopedCssEnabled>

Podpora knihovny tříd Razor (RCL)

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

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

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

  • Seskupené styly seznamu RCL se nepublikují 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: