Megosztás a következőn keresztül:

ASP.NET Core Blazor CSS izolálás

Megjegyzés:

Ez nem a cikk legújabb verziója. Az aktuális kiadásról a cikk .NET 10-es verziójában olvashat.

Figyelmeztetés

A ASP.NET Core ezen verziója már nem támogatott. További információt a .NET és a .NET Core támogatási szabályzatában talál. A jelen cikk .NET 9-es verzióját lásd az aktuális kiadásért .

Készítette: Dave Brock

Ez a cikk azt ismerteti, hogy a CSS elkülönítése hogyan terjed ki a CSS-nek az összetevőkre Razor , ami leegyszerűsítheti a CSS-t, és elkerülheti a más összetevőkkel vagy kódtárakkal való ütközéseket.

A CSS-stílusok elkülönítése az egyes lapokra, nézetekre és összetevőkre a csökkentés vagy az elkerülése érdekében:

  • A globális stílusokkal kapcsolatos függőségek, amelyek fenntartása nehézkes lehet.
  • Stílusütközések beágyazott tartalomban.

CSS-elkülönítés engedélyezése

Az összetevő-specifikus stílusok meghatározásához hozzon létre egy .razor.css olyan fájlt, amely megegyezik az adott mappában található összetevő fájljának nevével .razor . A .razor.css fájl hatókörrel rendelkező CSS-fájl.

A Example komponens számára az Example.razor fájlban hozzon létre egy fájlt, amely a Example.razor.css fájl mellett található. A Example.razor.css fájlnak ugyanabban a mappában kell lennie, mint az Example összetevőnek (Example.razor). A fájl "Example" alapneve nem érzékeny a kis- és nagybetűkre.

Example.razor:

@page "/example"

<h1>Scoped CSS Example</h1>

Example.razor.css:

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

A megadott Example.razor.css stílusok csak az összetevő renderelt kimenetére Example lesznek alkalmazva. A CSS-elkülönítés a megfelelő Razor fájl HTML-elemeire lesz alkalmazva. Az h1 alkalmazásban máshol definiált CSS-deklarációk nem ütköznek az Example összetevő stílusaival.

Megjegyzés:

A stíluselkülönítés garantálása érdekében a Razor kódblokkokban a CSS importálása nem támogatott.

CSS-elkülönítési csomagolás

A CSS elkülönítése a létrehozáskor történik. Blazor újraírja a CSS-választókat, hogy megfeleljenek az összetevő által megjelenített jelölésnek. Az újraírt CSS-stílusok kötegelve vannak, és statikus objektumként jönnek létre. A stíluslapra a <head> címke hivatkozik (a <head> tartalom helye). A program a következő <link> elemet adja hozzá a projektsablonokból létrehozott alkalmazáshoz Blazor :

Blazor Web App:

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

Különálló Blazor WebAssembly alkalmazások:

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

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

A {PACKAGE ID/ASSEMBLY NAME} helyőrző a projekt csomagazonosítója (<PackageId> a projektfájlban) egy alkalmazás kódtárának vagy szerelvénynevének.

Az alábbi példa egy üzemeltetett Blazor WebAssemblyClient alkalmazásból származik. Az alkalmazás szerelvényének neve BlazorSample.Client, és a projektsablon a <link> használatával hozzáadja a Blazor WebAssembly projekthez, amikor a Hostolt beállítással jön létre (-ho|--hosted opció használatával a .NET CLI-ben vagy az ASP.NET Core Hosted jelölőnégyzet segítségével a Visual Studioban):

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

A csomagban lévő fájlban minden összetevő egy hatókör-azonosítóhoz van társítva. Minden stílusösszetevőhöz hozzáfűz egy HTML-attribútumot a formátummal b-{STRING}, ahol a {STRING} helyőrző egy tíz karakterből álló sztring, amelyet a keretrendszer hoz létre. Az azonosító minden alkalmazáshoz egyedi. A renderelt Counter összetevőben Blazor hozzáfűz egy hatókör-azonosítót az h1 elemhez:

<h1 b-3xxtam6d07>

A {PACKAGE ID/ASSEMBLY NAME}.styles.css fájl a hatókör azonosítójával csoportosít egy stílusdeklarációt annak összetevőjével. Az alábbi példa az előző elem stílusát <h1> ismerteti:

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

A létrehozáskor létrejön egy projektcsomag a konvencióval obj/{CONFIGURATION}/{TARGET FRAMEWORK}/scopedcss/projectbundle/{PACKAGE ID/ASSEMBLY NAME}.bundle.scp.css, ahol a helyőrzők a következők:

  • {CONFIGURATION}: Az alkalmazás buildkonfigurációja (például Debug, Release).
  • {TARGET FRAMEWORK}: A cél keretrendszer (például net6.0).
  • {PACKAGE ID/ASSEMBLY NAME}: A projekt csomagazonosítója (<PackageId> a projektfájlban) egy alkalmazás kódtárának vagy szerelvénynevének (például BlazorSample).

Gyermekkomponens támogatás

A CSS-elkülönítés csak a formátumhoz {COMPONENT NAME}.razor.csstársított összetevőre vonatkozik, ahol a {COMPONENT NAME} helyőrző általában az összetevő neve. Ha módosításokat szeretne alkalmazni egy gyermekösszetevőre, használja a ::deeppszeudoelemet a szülőösszetevő fájljának bármely leszármazott elemére .razor.css . A ::deep pszeudoelem kiválasztja azokat az elemeket, amelyek egy elem létrehozott hatókör-azonosítójának leszármazottai .

Az alábbi példa egy Parent nevű szülőösszetevőt mutat be, amelyhez tartozik egy Child nevű gyermekösszetevő.

Parent.razor:

@page "/parent"

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

    <Child />
</div>

Child.razor:

<h1>Child Component</h1>

Frissítse a h1 deklarációt Parent.razor.css a ::deep pszeudoelemhez, hogy jelezze, a h1 stílusdeklarációnak vonatkoznia kell a szülőkomponensre és annak gyermekeire.

Parent.razor.css:

::deep h1 { 
    color: red;
}

A h1 stílus mostantól a Parent és Child komponensekhez vonatkozik, anélkül hogy külön hatókörű CSS-fájlt kellene létrehozni a gyermekkomponens számára.

A ::deep pszeudoelem csak a leszármazott elemekkel működik. Az alábbi jelölés a stílusokat az h1 összetevőkre a várt módon alkalmazza. A szülőösszetevő hatókörazonosítója az elemre div lesz alkalmazva, így a böngésző tudja, hogy a szülőösszetevő stílusokat örököl.

Parent.razor:

<div>
    <h1>Parent</h1>

    <Child />
</div>

Az elem kizárása div azonban eltávolítja a leszármazotti kapcsolatot. Az alábbi példában a stílus nem kerül alkalmazásra a gyermek komponensre.

Parent.razor:

<h1>Parent</h1>

<Child />

A ::deep pszeudoelem hatással van arra, hogy a hatókör attribútum hol van alkalmazva a szabályra. Ha CSS-szabályt határoz meg egy hatókörrel rendelkező CSS-fájlban, a hatókör a megfelelő legtöbb elemre lesz alkalmazva. Például: a div > a átalakul div > a[b-{STRING}] formára, ahol a {STRING} helyőrző egy tíz karakteres sztring, amelyet a keretrendszer hoz létre (például b-3xxtam6d07). Ha ehelyett azt szeretné, hogy a szabály egy másik választóra vonatkozzanak, a ::deep pszeudoelem ezt lehetővé teszi. Például div ::deep > a át lesz alakítva div[b-{STRING}] > a (például div[b-3xxtam6d07] > a).

A pszeudoelem bármely HTML-elemhez való csatolásával ::deep olyan hatókörű CSS-stílusokat hozhat létre, amelyek hatással vannak a más összetevők által renderelt elemekre, ha meg tudja határozni a renderelt HTML-címkék szerkezetét. Egy olyan összetevő esetében, amely egy hivatkozáscímkét (<a>) jelenít meg egy másik összetevőben, győződjön meg arról, hogy az összetevő egy div (vagy bármely más elembe) van csomagolva, és a szabály ::deep > a használatával hozzon létre egy stílust, amely csak az adott összetevőre vonatkozik, amikor a szülőösszetevő renderel.

Fontos

A hatókörrel rendelkező CSS csak a HTML-elemekre vonatkozik, az összetevőkre Razor és a címkesegítőkre nem, beleértve a címkesegítővel rendelkező elemeket is, például <input asp-for="..." />.

CSS-előfeldolgozó támogatása

A CSS-előfeldolgozók olyan funkciók használatával fejlesztik a CSS-fejlesztést, mint a változók, a beágyazás, a modulok, a mixins és az öröklés. Bár a CSS-elkülönítés natív módon nem támogatja a CSS-előfeldolgozókat( például Sass vagy Less), a CSS-előfeldolgozók integrálása zökkenőmentes, amíg az előfeldolgozó összeállítása megtörténik, mielőtt Blazor újraírja a CSS-választókat a buildelési folyamat során. A Visual Studio használatával, például konfigurálja a meglévő előprocesszor-fordítást a Build előtti feladatként a Visual Studio Feladatfuttató Böngészőjében.

Számos külső NuGet-csomag, például a AspNetCore.SassCompiler, képes SASS/SCSS-fájlokat lefordítani a buildelési folyamat elején, még a CSS elkülönítése előtt.

CSS-elkülönítés konfigurálása

A CSS-elkülönítés úgy lett kialakítva, hogy a beépített megoldáson kívül működjön, de konfigurációt biztosít bizonyos speciális forgatókönyvekhez, például ha függőségek vannak a meglévő eszközöktől vagy munkafolyamatoktól.

Hatókörazonosító formátumának testreszabása

A hatókör-azonosítók a formátumot b-{STRING}használják, ahol a {STRING} helyőrző a keretrendszer által létrehozott tíz karakteres sztring. A hatókörazonosító formátumának testreszabásához frissítse a projektfájlt egy kívánt mintára:

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

Az előző példában a Example.razor.css számára generált CSS a tartományazonosítót b-{STRING}-ről custom-scope-identifier-re módosítja.

Hatókörazonosítók használatával érje el az öröklést hatókörrel rendelkező CSS-fájlokkal. A következő projektfájl-példában egy BaseComponent.razor.css fájl az összetevők gyakori stílusait tartalmazza. Egy DerivedComponent.razor.css fájl örökli ezeket a stílusokat.

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

A helyettesítő karakter (*) operátorral több fájlban oszthat meg hatókör-azonosítókat:

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

A hatókör-azonosítók a formátumot b-{STRING}használják, ahol a {STRING} helyőrző a keretrendszer által létrehozott tíz karakteres sztring. A hatókörazonosító formátumának testreszabásához frissítse a projektfájlt egy kívánt mintára:

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

Az előző példában a Example.razor.css számára generált CSS a tartományazonosítót b-{STRING}-ről custom-scope-identifier-re módosítja.

Hatókörazonosítók használatával érje el az öröklést hatókörrel rendelkező CSS-fájlokkal. A következő projektfájl-példában egy BaseComponent.razor.css fájl az összetevők gyakori stílusait tartalmazza. Egy DerivedComponent.razor.css fájl örökli ezeket a stílusokat.

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

A helyettesítő karakter (*) operátorral több fájlban oszthat meg hatókör-azonosítókat:

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

Statikus webes objektumok alapútvonalának módosítása

A scoped.styles.css fájl az alkalmazás gyökerénél jön létre. A projektfájlban a <StaticWebAssetBasePath> tulajdonság használatával módosítsa az alapértelmezett elérési utat. Az alábbi példa a scoped.styles.css fájlt és az alkalmazás többi objektumát az _content elérési útra helyezi:

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

Automatikus kötegelés letiltása

Ha le szeretné tiltani a Blazor hatókörben lévő fájlok futásidőben történő közzétételének és betöltésének módját, használja a tulajdonságot DisableScopedCssBundling . Ha ezt a tulajdonságot használja, az azt jelenti, hogy más eszközök vagy folyamatok felelősek az izolált CSS-fájlok címtárból való levételéért obj , valamint a futtatókörnyezetben való közzétételükért és betöltésükért:

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

CSS-elkülönítés letiltása

Kapcsolja ki a CSS elkülönítést egy projekthez úgy, hogy a projektfájlban az alkalmazás <ScopedCssEnabled> tulajdonságát false értékre állítja.

<ScopedCssEnabled>false</ScopedCssEnabled>

Razor osztálykódtár (RCL) támogatása

A NuGet-csomagban vagy Razor osztálytárban (RCL) lévő összetevők izolált stílusai automatikusan össze vannak csomagolva:

  • Az alkalmazás CSS-importálással hivatkozik az RCL csomagolt stílusára. Egy elnevezett ClassLib osztálytár és egy Blazor stíluslaplal rendelkező BlazorSample.styles.css alkalmazás esetében a rendszer importálja az RCL stíluslapját az alkalmazás stíluslapjának tetején:

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

  • Az RCL csomagstílusai nem jelennek meg a stílusokat használó alkalmazás statikus webes objektumaként.

Az RCL-ekkel kapcsolatos további információkért tekintse meg a következő cikkeket:

További erőforrások

  • Last updated on