ASP.NET Core Blazor Izolacja CSS

Dave Brock

W tym artykule wyjaśniono, jak izolacja CSS ogranicza zakres stosowania CSS do komponentów Razor, co może uprościć arkusz CSS i pomóc uniknąć kolizji z innymi komponentami lub bibliotekami.

Izolowanie stylu CSS do pojedynczych stron, widoków i składników umożliwia zmniejszenie lub uniknięcie:

• Zależności od stylów globalnych, które mogą być trudne do utrzymania.
• Konflikty stylów w zagnieżdżonej zawartości.

Włącz izolację CSS

Aby zdefiniować style specyficzne dla komponentów, utwórz plik .razor.css, którego nazwa odpowiada nazwie pliku .razor dla komponentu w tym samym folderze. Plik .razor.css jest plikiem CSS o określonym zakresie.

Dla składnika Example w pliku Example.razor utwórz plik obok składnika o nazwie Example.razor.css. Plik Example.razor.css musi znajdować się w tym samym folderze co Example składnik (Example.razor). Podstawowa nazwa pliku "Example" nie uwzględnia wielkości liter.

Example.razor:

@page "/example"

<h1>Scoped CSS Example</h1>

Example.razor.css:

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

Style zdefiniowane w elemencie Example.razor.css są stosowane tylko do wyniku renderowania komponentu Example. Izolacja CSS jest stosowana do elementów HTML w odpowiadającym pliku Razor. Żadne h1 deklaracje CSS zdefiniowane w innym miejscu w aplikacji nie powodują konfliktu ze stylami składnika Example.

Pakietowanie izolacji CSS

Izolacja stylów CSS ma miejsce w czasie kompilacji. Blazor Ponownie zapisuje selektory CSS, aby dopasować znaczniki renderowane przez składnik. Przepisane style CSS są pakowane i tworzone jako zasób statyczny. Do arkusza stylów odwołano się wewnątrz tagu <head> (lokalizacja zawartości <head>). Następujący element <link> jest dodawany do aplikacji utworzonej z szablonów projektu Blazor:

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

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

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

Symbol {PACKAGE ID/ASSEMBLY NAME} zastępczy to identyfikator pakietu projektu (<PackageId> w pliku projektu) dla biblioteki lub nazwy zestawu aplikacji.

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

W pliku dołączonym każdy składnik jest skojarzony z identyfikatorem zakresu. Dla każdego z komponentów stylowanych atrybut HTML jest dołączany w formacie b-{STRING}, gdzie symbol zastępczy {STRING} jest ciągiem dziesięciu znaków wygenerowanym przez framework. Identyfikator jest unikatowy dla każdej aplikacji. W renderowanym komponencie Counter składnik Blazor dołącza identyfikator zakresu do elementu h1:

<h1 b-3xxtam6d07>

Plik {PACKAGE ID/ASSEMBLY NAME}.styles.css używa identyfikatora zakresu do grupowania deklaracji stylu z jego komponentem. W poniższym przykładzie przedstawiono styl dla poprzedzającego elementu <h1>:

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

W czasie kompilacji pakiet projektu jest tworzony przy użyciu konwencji obj/{CONFIGURATION}/{TARGET FRAMEWORK}/scopedcss/projectbundle/{PACKAGE ID/ASSEMBLY NAME}.bundle.scp.css, gdzie symbole zastępcze to:

• {CONFIGURATION}: konfiguracja budowania aplikacji (na przykład Debug, Release).
• {TARGET FRAMEWORK}: Framework docelowy (na przykład net6.0).
• {PACKAGE ID/ASSEMBLY NAME}: identyfikator pakietu projektu (<PackageId> w pliku projektu) dla biblioteki lub nazwy zestawu dla aplikacji (na przykład BlazorSample).

Obsługa komponentów podrzędnych

Izolacja CSS ma zastosowanie tylko do składnika skojarzonego z formatem {COMPONENT NAME}.razor.css, gdzie symbol zastępczy {COMPONENT NAME} jest zwykle nazwą składnika. Aby zastosować zmiany do składnika podrzędnego, użyj ::deeppseudo-elementu dla wszystkich elementów podrzędnych w pliku składnika nadrzędnego .razor.css. Pseudoelement ::deep wybiera elementy, które są elementami podrzędnymi wygenerowanego identyfikatora zakresu elementu.

W poniższym przykładzie pokazano komponent nadrzędny o nazwie Parent z komponentem podrzędnym o nazwie Child.

Parent.razor:

@page "/parent"

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

    <Child />
</div>

Child.razor:

<h1>Child Component</h1>

Zaktualizuj deklarację h1 w Parent.razor.css z pseudoelementem ::deep, aby zaznaczyć, że deklaracja stylu h1 musi mieć zastosowanie do składnika nadrzędnego i jego elementów podrzędnych.

Parent.razor.css:

::deep h1 { 
    color: red;
}

Styl h1 ma teraz zastosowanie do komponentów Parent i Child bez konieczności tworzenia oddzielnego pliku CSS o określonym zakresie dla składnika podrzędnego.

Pseudo-element ::deep działa tylko z elementami potomnymi. Poniższy kod znaczników stosuje style h1 do komponentów zgodnie z oczekiwaniami. Identyfikator zakresu składnika nadrzędnego jest stosowany do elementu div, więc przeglądarka wie, że element ten dziedziczy style ze składnika nadrzędnego.

Parent.razor:

<div>
    <h1>Parent</h1>

    <Child />
</div>

Jednak wykluczenie elementu div spowoduje usunięcie relacji potomka. W poniższym przykładzie styl nie jest stosowany do składnika podrzędnego.

Parent.razor:

<h1>Parent</h1>

<Child />

Pseudo-element ::deep wpływa na to, gdzie atrybut scope jest stosowany do reguły. Podczas definiowania reguły CSS w pliku CSS o określonym zakresie zakres jest stosowany do elementu położonego najbardziej po prawej. Na przykład: div > a jest przekształcana na div > a[b-{STRING}], gdzie symbol zastępczy {STRING} jest ciągiem dziesięciu znaków wygenerowanym przez framework (na przykład b-3xxtam6d07). Jeśli zamiast tego chcesz, aby reguła była stosowana do innego selektora, pseudo-element ::deep pozwala to zrobić. Na przykład div ::deep > a element jest przekształcany na div[b-{STRING}] > a (na przykład div[b-3xxtam6d07] > a).

Możliwość dołączania ::deep pseudo-elementu do dowolnego elementu HTML umożliwia tworzenie stylów CSS o określonym zakresie, które wpływają na elementy renderowane przez inne składniki, gdy można określić strukturę renderowanych tagów HTML. W przypadku składnika, który renderuje tag hiperłącza (<a>) wewnątrz innego składnika, upewnij się, że składnik jest opakowany w div element (lub dowolny inny) i użyj reguły ::deep > a , aby utworzyć styl, który jest stosowany tylko do tego składnika, gdy składnik nadrzędny renderuje.

Obsługa preprocesora CSS

Preprocesory CSS są przydatne do usprawniania tworzenia plików CSS poprzez wykorzystanie funkcji takich jak zmienne, zagnieżdżanie, moduły, domieszki i dziedziczenie. Chociaż izolacja CSS nie obsługuje natywnie preprocesorów CSS, takich jak Sass lub Less, integrowanie preprocesorów CSS jest bezproblemowe, o ile kompilacja preprocesora ma miejsce, zanim Blazor przepisze selektory CSS podczas procesu kompilacji. Na przykład przy użyciu programu Visual Studio można skonfigurować istniejące zadanie preprocessingu jako zadanie Przed kompilowaniem w narzędziu Task Runner Explorer programu Visual Studio.

Wiele pakietów NuGet innych firm, takich jak AspNetCore.SassCompiler, może kompilować pliki SASS/SCSS na początku procesu kompilacji przed wystąpieniem izolacji CSS.

Konfiguracja izolacji CSS

Izolacja CSS została zaprojektowana tak, aby działać od razu, ale zapewnia konfigurację niektórych zaawansowanych scenariuszy, takich jak gdy istnieją zależności od istniejących narzędzi lub przepływów pracy.

Dostosuj format identyfikatora zakresu

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

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

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

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

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

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

Zmień podstawową ścieżkę w przypadku statycznych zasobów internetowych

Plik scoped.styles.css jest generowany w katalogu głównym aplikacji. W pliku projektu użyj właściwości <StaticWebAssetBasePath>, aby zmienić ścieżkę domyślną. W poniższym przykładzie plik scoped.styles.css oraz pozostałe zasoby aplikacji są umieszczane na ścieżce _content.

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

Wyłącz automatyczne tworzenie pakietów

Aby zrezygnować ze sposobu, w jaki Blazor publikuje i ładuje pliki zakresowe w czasie wykonywania, użyj właściwości DisableScopedCssBundling. W przypadku korzystania z tej właściwości oznacza to, że inne narzędzia lub procesy są odpowiedzialne za przenoszenie izolowanych plików CSS z katalogu obj i publikowanie i ładowanie ich w czasie wykonywania:

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

Wyłącz izolację CSS

Wyłącz izolację CSS dla projektu, ustawiając właściwość <ScopedCssEnabled> na wartość false w pliku projektu aplikacji:

<ScopedCssEnabled>false</ScopedCssEnabled>

Obsługa biblioteki klas Razor Razor (RCL)

Izolowane style dla komponentów w pakiecie NuGet lub w pakiecie biblioteki klas Razor Razor(RCL) są automatycznie pakowane:

• Aplikacja używa importów CSS do odwoływania się do dołączonych stylów RCL. W przypadku biblioteki klas o nazwie ClassLib i aplikacji Blazor z arkuszem stylów BlazorSample.styles.css arkusz stylów biblioteki RCL jest importowany w górnej części arkusza stylów aplikacji:

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

• Dołączone style RCL nie są publikowane jako statyczny zasób internetowy aplikacji, która korzysta z tych stylów.

Aby uzyskać więcej informacji na temat bibliotek klas Razor, zobacz następujące artykuły:

• Używanie składników Razor platformy ASP.NET Core z biblioteki klas Razor (RCL)
• Interfejs użytkownika Razor do ponownego wykorzystania w bibliotekach klas na platformie ASP.NET Core