ASP.NET Core Blazor Izolace šablon stylů CSS

  • Článek
  • 5 min ke čtení

Od Dave Brock

Izolovat styly CSS na jednotlivých stránkách, zobrazeních a součástech k omezení nebo zabránění:

  • Závislosti na globálních stylech, které mohou být náročné na údržbu.
  • Ve vnořeném obsahu jsou konflikty stylu.

Povolit izolaci šablon stylů CSS

Chcete-li definovat styly specifické pro komponentu, vytvořte soubor, který .razor.css odpovídá názvu .razor souboru pro komponentu ve stejné složce. .razor.cssSoubor je soubor CSS s vymezeným oborem.

Pro Example komponentu v Example.razor souboru vytvořte soubor vedle komponenty s názvem Example.razor.css . Example.razor.cssSoubor 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 .

Pages/Example.razor:

@page "/example"

<h1>Scoped CSS Example</h1>

Pages/Example.razor.css:

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

Styly definované v Example.razor.css jsou použity pouze pro vykreslený výstup Example komponenty. Izolace CSS je použita na prvky HTML ve shodě Razor souboru. Jakékoli h1 deklarace šablon stylů CSS definované jinde v aplikaci nejsou v konfliktu se Example Styly komponenty.

Poznámka

Aby bylo možné zaručit izolaci stylu, když dojde k sdružování, import šablon stylů CSS v Razor blocích kódu není podporován.

Sdružování oddělení stylů CSS

K izolaci šablon stylů CSS dojde v době sestavení. Blazor přepíše selektory šablon stylů CSS tak, aby odpovídaly značkám vykresleným komponentou. Přepsané styly CSS jsou seskupeny a vyrobeny jako statický prostředek. Na šablonu stylů je odkazováno uvnitř <head> značky wwwroot/index.html ( Blazor WebAssembly ) nebo Pages/_Layout.cshtml ( Blazor Server ). Následující <link> element je ve výchozím nastavení přidán 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 WebAssembly Client aplikace. název sestavení aplikace je BlazorSample.Client a <link> je přidán Blazor WebAssembly šablonou projektu, když je projekt vytvořen s možností host ( -ho|--hosted možnost pomocí zaškrtávacího políčka rozhraní .net CLI nebo ASP.NET Core hostované pomocí Visual Studio):

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

V rámci souborového souboru je každá součást přidružena k identifikátoru oboru. Pro každou komponentu ve stylu je atribut HTML připojen ve formátu b-{STRING} , kde {STRING} zástupný symbol je řetězec deseti znaků generovaný rozhraním Framework. Identifikátor je jedinečný pro každou aplikaci. Ve vykreslené Counter komponentě Blazor připojí identifikátor oboru k h1 elementu:

<h1 b-3xxtam6d07>

{ASSEMBLY NAME}.styles.cssSoubor používá identifikátor oboru k seskupení deklarace stylu s jeho komponentou. Následující příklad poskytuje styl pro předchozí <h1> prvek:

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

V době sestavování se vytvoří sada prostředků projektu s konvencí {STATIC WEB ASSETS BASE PATH}/Project.lib.scp.css , kde zástupný symbol {STATIC WEB ASSETS BASE PATH} je základní cesta ke statickému webovému prostředku.

pokud jsou využívány jiné projekty, například NuGet balíčky nebo Razor knihovny tříd, soubor balíčku:

  • Odkazuje na styly pomocí importů CSS.
  • Není publikovaný jako statický webový prostředek aplikace, který používá styly.

Podpora podřízených komponent

Ve výchozím nastavení se izolace CSS vztahuje pouze na komponentu, kterou přidružíte ke formátu {COMPONENT NAME}.razor.css , kde zástupný symbol {COMPONENT NAME} je obvykle název součásti. Chcete-li použít změny pro podřízenou komponentu, použijte ::deep kombinátorem pro všechny následníky v souboru nadřazené komponenty .razor.css . ::deepKombinátorem vybere prvky, které jsou následníky identifikátoru generovaného oboru elementu.

Následující příklad ukazuje nadřazenou komponentu s názvem Parent podřízené komponenty s názvem Child .

Pages/Parent.razor:

@page "/parent"

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

    <Child />
</div>

Shared/Child.razor:

<h1>Child Component</h1>

Aktualizujte h1 deklaraci v rámci Parent.razor.css pomocí ::deep kombinátorem, aby se h1 deklarace stylu mohla vztahovat na nadřazenou komponentu a její podřízené položky.

Pages/Parent.razor.css:

::deep h1 { 
    color: red;
}

h1Styl se teď vztahuje na Parent komponenty a Child bez nutnosti vytvořit samostatný soubor CSS v oboru pro podřízenou komponentu.

::deepKombinátorem funguje pouze se následníky. Následující kód aplikuje h1 styly na komponenty podle očekávání. Identifikátor oboru nadřazené komponenty je použit pro div element, takže prohlížeč ví, že zdědí styly z nadřazené komponenty.

Pages/Parent.razor:

<div>
    <h1>Parent</h1>

    <Child />
</div>

Avšak vyloučení div elementu odebere relaci následníka. V následujícím příkladu není styl použit pro podřízenou komponentu.

Pages/Parent.razor:

<h1>Parent</h1>

<Child />

Podpora preprocesoru šablon stylů CSS

Preprocesory šablon stylů CSS jsou užitečné pro zlepšení vývoje šablon stylů CSS díky použití funkcí, jako jsou proměnné, vnořování, moduly, objekty Mixin a dědičnost. I když se nejedná o izolaci šablon stylů CSS, nativně podporuje preprocesory CSS, jako je Sass nebo méně, integrování předprocesorů CSS je bezproblémové, dokud dojde k kompilaci preprocesoru před Blazor přepsáním selektorů v procesu sestavení. pomocí Visual Studio například nakonfigurujte existující kompilaci preprocesoru jako před úlohou sestavení v průzkumníku Visual Studio spouštěče úloh.

mnoho balíčků NuGet třetích stran, jako Delegate.SassBuilder je, může kompilovat soubory SASS/SCSS na začátku procesu sestavení před tím, než dojde k izolaci šablon stylů CSS a nevyžaduje se žádná další konfigurace.

Konfigurace izolace šablon stylů CSS

Izolace šablon stylů CSS je navržena tak, aby fungovala předem, ale poskytuje konfiguraci pro některé pokročilé scénáře, jako například v případě, že existují závislosti na existujících nástrojích nebo pracovních postupech.

Přizpůsobení formátu identifikátoru oboru

Ve výchozím nastavení identifikátory oboru používají formát b-{STRING} , kde {STRING} zástupný symbol je řetězec deseti znaků generovaný rozhraním Framework.. Chcete-li přizpůsobit formát identifikátoru oboru, aktualizujte soubor projektu na požadovaný vzor:

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

V předchozím příkladu šablona stylů CSS vygenerovala pro Example.razor.css změny jejího identifikátoru rozsahu z b-{STRING} na custom-scope-identifier .

Pomocí identifikátorů oboru můžete dosáhnout dědění s vymezenými soubory šablon stylů CSS. V následujícím příkladu souboru projektu BaseComponent.razor.css obsahuje soubor společné styly napříč komponentami. DerivedComponent.razor.cssSoubory tyto styly zdědí.

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

Pomocí operátoru zástupného znaku ( * ) můžete sdílet identifikátory oboru mezi více soubory:

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

Změna základní cesty pro statické webové prostředky

scoped.styles.cssSoubor se vygeneruje v kořenu aplikace. V souboru projektu změňte výchozí cestu pomocí <StaticWebAssetBasePath> vlastnosti . Následující příklad umístí scoped.styles.css soubor a zbytek assetů aplikace na _content cestu:

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

Zakázat automatické sdružování

Chcete-li se vyjádřit Blazor , jak publikovat a načíst vymezené soubory za běhu, použijte DisableScopedCssBundling vlastnost. Při použití této vlastnosti znamená, že jiné nástroje nebo procesy zodpovídají za pořízení izolovaných souborů CSS z obj adresáře a jejich publikování a načtení za běhu:

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

Razor Podpora knihovny tříd (RCL)

Když Razor Knihovna tříd (RCL) poskytuje izolované styly, <link> href atribut značky odkazuje na {STATIC WEB ASSET BASE PATH}/{PACKAGE ID}.bundle.scp.css , kde jsou zástupné symboly:

  • {STATIC WEB ASSET BASE PATH}: Základní cesta ke statickému webovému prostředku.
  • {PACKAGE ID}: ID balíčkuknihovny. V případě, že <PackageId> v souboru projektu není zadán název balíčku, je výchozím názvem sestavení projektu.

V následujícím příkladu:

  • Základní cesta ke statickému webovému prostředku je _content/ClassLib .
  • Název sestavení knihovny tříd je ClassLib .

wwwroot/index.html ( Blazor WebAssembly ) nebo Pages/_Layout.cshtml (Blazor Server):

<link href="_content/ClassLib/ClassLib.bundle.scp.css" rel="stylesheet">

Další informace o RCLs najdete v následujících článcích:

Další zdroje informací

Při izolaci šablon stylů CSS je funkce stylů CSS zjednodušena tím, že zabraňuje závislostem na globálních stylech a pomáhá vyhnout se konfliktům stylů mezi komponentami a knihovnami.

Povolit izolaci šablon stylů CSS

Chcete-li definovat styly specifické pro komponentu, vytvořte soubor, který .razor.css odpovídá názvu .razor souboru pro komponentu ve stejné složce. .razor.cssSoubor je soubor CSS s vymezeným oborem.

Pro Example komponentu v Example.razor souboru vytvořte soubor vedle komponenty s názvem Example.razor.css . Example.razor.cssSoubor 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 .

Pages/Example.razor:

@page "/example"

<h1>Scoped CSS Example</h1>

Pages/Example.razor.css:

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

Styly definované v Example.razor.css jsou použity pouze pro vykreslený výstup Example komponenty. Izolace CSS je použita na prvky HTML ve shodě Razor souboru. Jakékoli h1 deklarace šablon stylů CSS definované jinde v aplikaci nejsou v konfliktu se Example Styly komponenty.

Poznámka

Aby bylo možné zaručit izolaci stylu, když dojde k sdružování, import šablon stylů CSS v Razor blocích kódu není podporován.

Sdružování oddělení stylů CSS

K izolaci šablon stylů CSS dojde v době sestavení. Blazor přepíše selektory šablon stylů CSS tak, aby odpovídaly značkám vykresleným komponentou. Přepsané styly CSS jsou seskupeny a vyrobeny jako statický prostředek. Na šablonu stylů je odkazováno uvnitř <head> značky wwwroot/index.html ( Blazor WebAssembly ) nebo Pages/_Host.cshtml ( Blazor Server ). Následující <link> element je ve výchozím nastavení přidán 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 WebAssembly Client aplikace. Název sestavení aplikace je a je přidán šablonou projektu při vytvoření projektu s možností Hostované ( možnost pomocí .NET CLI nebo zaškrtávacího políčka hostovaného ASP.NET Core pomocí BlazorSample.Client <link> Blazor WebAssembly -ho|--hosted Visual Studio):

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

V rámci souboru balíčku je každá komponenta přidružena k identifikátoru oboru. Pro každou komponentu se stylem připojí atribut HTML ve formátu b-<10-character-string> . Identifikátor je pro každou aplikaci jedinečný a odlišný. Ve vykreslené komponentě připojí identifikátor Counter oboru k Blazor h1 elementu :

<h1 b-3xxtam6d07>

Soubor {ASSEMBLY NAME}.styles.css používá identifikátor oboru k seskupení deklarace stylu se svou komponentou. Následující příklad poskytuje styl pro předchozí <h1> prvek:

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

V době sestavení se vytvoří sada projektů s konvencí , kde zástupný symbol je základní cesta {STATIC WEB ASSETS BASE PATH}/Project.lib.scp.css {STATIC WEB ASSETS BASE PATH} statických webových prostředků.

Pokud se využívají jiné projekty, například NuGet balíčky nebo knihovny tříd Razor ,přibalený soubor:

  • Odkazuje na styly pomocí importů CSS.
  • Není publikovaný jako statický webový prostředek aplikace, která využívá styly.

Podpora podřízených komponent

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

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

Pages/Parent.razor:

@page "/parent"

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

    <Child />
</div>

Shared/Child.razor:

<h1>Child Component</h1>

Aktualizujte h1 deklaraci Parent.razor.css v souboru pomocí ::deep kombinátoru, aby bylo vidět, že deklarace stylu musí platit pro nadřazenou komponentu a h1 její podřízené položky.

Pages/Parent.razor.css:

::deep h1 { 
    color: red;
}

Styl se teď vztahuje na komponenty a , aniž by bylo nutné vytvořit samostatný vymezený soubor h1 Parent CSS pro podřízený Child komponentu.

::deepKombinátor funguje pouze s následníky. Následující kód aplikuje h1 styly na komponenty podle očekávání. Identifikátor oboru nadřazené komponenty se použije na element , takže prohlížeč ví, že má dědit styly div z nadřazené komponenty.

Pages/Parent.razor:

<div>
    <h1>Parent</h1>

    <Child />
</div>

Vyloučením elementu se div ale odebere následná relace. V následujícím příkladu není styl použit u podřízené komponenty.

Pages/Parent.razor:

<h1>Parent</h1>

<Child />

Podpora preprocesoru CSS

Preprocesory CSS jsou užitečné pro zlepšení vývoje šablon stylů CSS s využitím funkcí, jako jsou proměnné, vnoření, moduly, mixiny a dědičnost. I když izolace šablon stylů CSS nativně nepodporuje preprocesory CSS, jako jsou Sass nebo Less, integrace preprocesorů CSS je bezproblémová, pokud probíhá kompilace preprocesoru před přepsáním selektorů CSS během procesu Blazor sestavení. Pomocí Visual Studio můžete například nakonfigurovat existující kompilaci preprocesoru jako úlohu Před sestavením v Visual Studio spouštěče úloh.

Mnoho balíčků NuGet třetích stran, například Delegate.SassBuilder,může kompilovat soubory SASS/SCSS na začátku procesu sestavení před izolací šablon stylů CSS a nevyžaduje se žádná další konfigurace.

Konfigurace izolace šablon stylů CSS

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

Přizpůsobení formátu identifikátoru oboru

Ve výchozím nastavení používají identifikátory oboru formát b-<10-character-string> . Pokud chcete přizpůsobit formát identifikátoru oboru, aktualizujte soubor projektu na požadovaný vzor:

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

V předchozím příkladu šablona stylů CSS vygenerovaná pro Example.razor.css změní identifikátor oboru z na b-<10-character-string> my-custom-scope-identifier .

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

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

Pomocí operátoru se zástupným znakem ( * ) můžete sdílet identifikátory oboru mezi více soubory:

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

Změna základní cesty pro statické webové prostředky

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í soubor a zbývající prostředky scoped.styles.css aplikace do _content cesty:

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

Zákaz automatického sdružování

Pokud chcete vyjádřit nesouhlas Blazor s publikováním a načítáním vymezených souborů za běhu, použijte DisableScopedCssBundling vlastnost . Při použití této vlastnosti to znamená, že za převzetí izolovaných souborů CSS z adresáře a jejich publikování a načítání za běhu zodpovídají obj jiné nástroje nebo procesy:

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

Razor Podpora knihovny tříd (RCL)

Pokud knihovna Razor tříd (RCL) poskytuje izolované styly, atribut značky odkazuje na <link> , kde href {STATIC WEB ASSET BASE PATH}/{PACKAGE ID}.bundle.scp.css zástupné symboly jsou:

  • {STATIC WEB ASSET BASE PATH}: Základní cesta statického webového assetu.
  • {PACKAGE ID}: ID balíčku knihovny tříd. Id balíčku ve výchozím nastavení používá název sestavení projektu, pokud není zadaný v souboru projektu <PackageId> knihovny.

V následujícím příkladu:

  • Základní cesta statického webového assetu je _content/ClassLib .
  • ID balíčku knihovny tříd je ClassLib .

wwwroot/index.html ( Blazor WebAssembly ) nebo Pages_Host.cshtml (Blazor Server):

<link href="_content/ClassLib/ClassLib.bundle.scp.css" rel="stylesheet">

Další informace o seznamech RCL najdete v následujících článcích: