ASP.NET Core Blazor CSS yalıtımı

  • Makale
  • Okumak için 4 dakika

By Davve Brock

Azaltmak veya önlemek için CSS stillerini ayrı sayfalar, görünümler ve bileşenlerle yalıtın:

  • Korumak zor olabilecek genel stillerdeki bağımlılıklar.
  • Stil, iç içe içerikte çakışıyor.

CSS yalıtımını etkinleştir

Bileşene özgü stiller tanımlamak için, .razor.css .razor aynı klasörde bileşen için dosyanın adıyla eşleşen bir dosya oluşturun. .razor.cssDosya KAPSAMLı bir CSS dosyasıdır.

ExampleBir dosyadaki bileşen için Example.razor , adlı bileşenden sonra bir dosya oluşturun Example.razor.css . Example.razor.cssDosya, bileşeniyle aynı klasörde bulunmalıdır Example ( Example.razor ). Dosyanın " Example " temel adı büyük/küçük harfe duyarlı değildir .

Pages/Example.razor:

@page "/example"

<h1>Scoped CSS Example</h1>

Pages/Example.razor.css:

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

İçinde tanımlanan stiller Example.razor.css Yalnızca bileşenin işlenmiş çıktısına uygulanır Example . CSS yalıtımı, eşleşen dosyadaki HTML öğelerine uygulanır Razor . h1Uygulamanın başka bir yerinde tanımlanan CSS bildirimleri Example bileşen stilleriyle çakışmaz.

Not

Paketleme gerçekleştiğinde stil yalıtımının garanti edilmesi için, Razor kod bloklarına CSS içeri aktarılması desteklenmez.

CSS yalıtım paketlemeyi oluşturma

CSS yalıtımı derleme zamanında oluşur. Blazor CSS seçicileri bileşen tarafından işlenen biçimlendirmeye uyacak şekilde yeniden yazar. Yeniden yazan CSS stilleri paketlenmiştir ve statik bir varlık olarak üretilir. Stil sayfasına <head> wwwroot/index.html ( Blazor WebAssembly ) veya Pages/_Layout.cshtml () etiketinin içinde başvurulur Blazor Server . Aşağıdaki <link> öğe varsayılan olarak Blazor , yer tutucunun {ASSEMBLY NAME} projenin derleme adı olduğu proje şablonlarından oluşturulmuş bir uygulamaya eklenir:

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

Aşağıdaki örnek, barındırılan bir Blazor WebAssembly Client uygulama. uygulamanın derleme adı BlazorSample.Client , ve <link> Blazor WebAssembly proje barındırılan seçenekle ( -ho|--hosted Visual Studio kullanılarak .net clı veya ASP.NET Core Hosted onay kutusu kullanılarak) oluşturulduğunda, proje şablonu tarafından eklenir:

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

Paketlenmiş dosya içinde her bileşen bir kapsam tanımlayıcısı ile ilişkilendirilir. Her stillendirilmiş bileşen için, b-{STRING} {STRING} yer tutucunun çerçeve tarafından oluşturulan on karakterlik bir dize olduğu BIÇIMIYLE bir HTML özniteliği eklenir. Tanımlayıcı her uygulama için benzersizdir. İşlenmiş Counter bileşende, Blazor öğesine bir kapsam tanımlayıcısı ekler h1 :

<h1 b-3xxtam6d07>

{ASSEMBLY NAME}.styles.cssDosya, bir stil bildirimini bileşeniyle gruplamak için kapsam tanımlayıcısını kullanır. Aşağıdaki örnek, önceki öğenin stilini sağlar <h1> :

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

Derleme zamanında,, {STATIC WEB ASSETS BASE PATH}/Project.lib.scp.css yer tutucunun {STATIC WEB ASSETS BASE PATH} statik Web varlıkları temel yolu olduğu, kuralıyla birlikte bir proje paketi oluşturulur.

NuGet paketler veya Razor sınıf kitaplıklarıgibi diğer projeler kullanılıyorsa paketlenmiş dosya:

  • CSS içeri aktarmaları kullanarak stillere başvurur.
  • , Stilleri tüketen uygulamanın statik bir web varlığı olarak yayımlanmaz.

Alt bileşen desteği

Varsayılan olarak, CSS yalıtımı yalnızca biçimiyle ilişkilendirdiğiniz bileşen için geçerlidir {COMPONENT NAME}.razor.css ; burada yer tutucu {COMPONENT NAME} genellikle bileşen adıdır. Bir alt bileşene değişiklikler uygulamak için, ::deep Combinator üst bileşenin dosyasındaki tüm alt öğeleri kullanın .razor.css . ::deepCombinator, bir öğenin oluşturulan kapsam tanımlayıcısının alt öğeleri olan öğeleri seçer.

Aşağıdaki örnek, Parent adlı bir alt bileşen ile çağrılan bir üst bileşeni gösterir Child .

Pages/Parent.razor:

@page "/parent"

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

    <Child />
</div>

Shared/Child.razor:

<h1>Child Component</h1>

h1 Parent.razor.css ::deep h1 Stil bildiriminin üst bileşene ve alt öğelerine uygulanması gerektiğini belirtmek için Combinator ile içindeki bildirimi güncelleştirin.

Pages/Parent.razor.css:

::deep h1 { 
    color: red;
}

h1Stil artık Parent Child alt bileşen için ayrı bir kapsamlı CSS dosyası oluşturmaya gerek olmadan ve bileşenleri için geçerlidir.

::deepCombinator yalnızca alt öğeler ile kullanılabilir. Aşağıdaki biçimlendirme, h1 stilleri beklenen şekilde bileşenlere uygular. Üst bileşenin kapsam tanımlayıcısı div öğesine uygulanır, bu nedenle tarayıcı üst bileşenden stilleri devralmayı bilir.

Pages/Parent.razor:

<div>
    <h1>Parent</h1>

    <Child />
</div>

Ancak, öğesinin dışlanması alt div ilişkiyi kaldırır. Aşağıdaki örnekte, stili alt bileşene uygulanmaz.

Pages/Parent.razor:

<h1>Parent</h1>

<Child />

CSS Önişlemci desteği

CSS preiþlemcileri, değişkenler, iç içe geçme, modüller, mixıns ve devralma gibi özelliklerden yararlanarak CSS geliştirmeyi iyileştirmek için yararlıdır. CSS yalıtımı, Sass veya daha düşük gibi CSS ön işlemcilerini yerel olarak desteklemeirken, Blazor derleme işlemi SıRASıNDA CSS seçicileri yeniden yazmadan önce, ön işlemci derlemesi gerçekleştiği sürece CSS ön işlemcilerini tümleştirmek sorunsuz olur. örneğin Visual Studio kullanarak, var olan önişlemci derlemesini, Visual Studio görev çalıştırıcısı gezgininde derleme görevi olarak yapılandırın.

gibi birçok üçüncü taraf NuGet paketi, Delegate.SassBuilder CSS yalıtımı gerçekleşmeden önce derleme işleminin başlangıcında sass/SCSS dosyalarını derleyebilir ve ek yapılandırma gerekmez.

CSS yalıtım yapılandırması

CSS yalıtım, kullanıma hazır çalışacak şekilde tasarlanmıştır, ancak mevcut araçlar ya da iş akışlarında bağımlılıklar olduğu gibi bazı gelişmiş senaryolar için yapılandırma sağlar.

Kapsam tanımlayıcı biçimini Özelleştir

Varsayılan olarak, kapsam tanımlayıcıları b-{STRING} , {STRING} yer tutucunun çerçeve tarafından oluşturulan on karakterlik bir dize olduğu biçimi kullanır. Kapsam tanımlayıcı biçimini özelleştirmek için, proje dosyasını istenen bir düzene güncelleştirin:

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

Yukarıdaki örnekte, için oluşturulan CSS, Example.razor.css kapsam tanımlayıcısını ' dan ' a değiştirir b-{STRING} custom-scope-identifier .

Kapsamlı CSS dosyalarıyla devralma elde etmek için kapsam tanımlayıcılarını kullanın. Aşağıdaki proje dosyası örneğinde, bir BaseComponent.razor.css Dosya bileşenler arasında ortak stiller içerir. Bir DerivedComponent.razor.css dosya bu stilleri devralır.

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

*Birden çok dosya genelinde kapsam tanımlayıcılarını paylaşmak için joker () işlecini kullanın:

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

Statik web varlıklarının taban yolunu değiştirme

scoped.styles.cssDosya, uygulamanın kökünde oluşturulur. Proje dosyasında, varsayılan yolu değiştirmek için <StaticWebAssetBasePath> özelliğini kullanın. Aşağıdaki örnek, scoped.styles.css yolundaki dosyayı ve uygulamanın varlıklarını geri kalanını şu _content yolda koyar:

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

Otomatik paketlemeyi devre dışı bırak

BlazorÇalışma zamanında bulunan kapsamlı dosyaları nasıl yayımlayıp yüklediğini devre dışı bırakmak için özelliğini kullanın DisableScopedCssBundling . Bu özelliği kullanırken, diğer araçların veya işlemlerin dizinden yalıtılmış CSS dosyalarını alma obj ve çalışma zamanında bunları yayımlama ve yükleme işlemlerinden sorumlu olduğu anlamına gelir:

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

Razor sınıf kitaplığı (RCL) desteği

Bir Razor sınıf kitaplığı (RCL) yalıtılmış stiller sağlıyorsa, <link> etiketin href özniteliği öğesine işaret eder {STATIC WEB ASSET BASE PATH}/{PACKAGE ID}.bundle.scp.css ; burada yer tutucular:

  • {STATIC WEB ASSET BASE PATH}: Statik Web varlık temel yolu.
  • {PACKAGE ID}: Kitaplığın paket kimliği. Proje dosyasında belirtilmemişse, paket KIMLIĞI varsayılan olarak projenin derleme adına sahiptir <PackageId> .

Aşağıdaki örnekte:

  • Statik Web varlık temel yolu _content/ClassLib .
  • Sınıf kitaplığının derleme adı ClassLib .

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

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

RCLs hakkında daha fazla bilgi için aşağıdaki makalelere bakın:

Ek kaynaklar

CSS yalıtımı, genel stillerdeki bağımlılıkları önleyerek uygulamanın CSS parmak izini basitleştirir ve bileşenler ve kitaplıklar arasında stil çakışmalarını önlemeye yardımcı olur.

CSS yalıtımını etkinleştir

Bileşene özgü stiller tanımlamak için, .razor.css .razor aynı klasörde bileşen için dosyanın adıyla eşleşen bir dosya oluşturun. .razor.cssDosya KAPSAMLı bir CSS dosyasıdır.

ExampleBir dosyadaki bileşen için Example.razor , adlı bileşenden sonra bir dosya oluşturun Example.razor.css . Example.razor.cssDosya, bileşeniyle aynı klasörde bulunmalıdır Example ( Example.razor ). Dosyanın " Example " temel adı büyük/küçük harfe duyarlı değildir .

Pages/Example.razor:

@page "/example"

<h1>Scoped CSS Example</h1>

Pages/Example.razor.css:

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

İçinde tanımlanan stiller Example.razor.css Yalnızca bileşenin işlenmiş çıktısına uygulanır Example . CSS yalıtımı, eşleşen dosyadaki HTML öğelerine uygulanır Razor . h1Uygulamanın başka bir yerinde tanımlanan CSS bildirimleri Example bileşen stilleriyle çakışmaz.

Not

Paketleme gerçekleştiğinde stil yalıtımının garanti edilmesi için, Razor kod bloklarına CSS içeri aktarılması desteklenmez.

CSS yalıtım paketlemeyi oluşturma

CSS yalıtımı derleme zamanında oluşur. Blazor CSS seçicileri bileşen tarafından işlenen biçimlendirmeye uyacak şekilde yeniden yazar. Yeniden yazan CSS stilleri paketlenmiştir ve statik bir varlık olarak üretilir. Stil sayfasına <head> wwwroot/index.html ( Blazor WebAssembly ) veya Pages/_Host.cshtml () etiketinin içinde başvurulur Blazor Server . Aşağıdaki <link> öğe varsayılan olarak Blazor , yer tutucunun {ASSEMBLY NAME} projenin derleme adı olduğu proje şablonlarından oluşturulmuş bir uygulamaya eklenir:

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

Aşağıdaki örnek, barındırılan bir Blazor WebAssembly Client uygulama. uygulamanın derleme adı BlazorSample.Client , ve <link> Blazor WebAssembly proje barındırılan seçenekle ( -ho|--hosted Visual Studio kullanılarak .net clı veya ASP.NET Core Hosted onay kutusu kullanılarak) oluşturulduğunda, proje şablonu tarafından eklenir:

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

Paketlenmiş dosya içinde her bileşen bir kapsam tanımlayıcısı ile ilişkilendirilir. Stil uygulanmış her bileşen için, biçimiyle bir HTML özniteliği eklenir b-<10-character-string> . Tanımlayıcı benzersiz ve her uygulama için farklıdır. İşlenmiş Counter bileşende, Blazor öğesine bir kapsam tanımlayıcısı ekler h1 :

<h1 b-3xxtam6d07>

{ASSEMBLY NAME}.styles.cssDosya, bir stil bildirimini bileşeniyle gruplamak için kapsam tanımlayıcısını kullanır. Aşağıdaki örnek, önceki öğenin stilini sağlar <h1> :

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

Derleme zamanında,, {STATIC WEB ASSETS BASE PATH}/Project.lib.scp.css yer tutucunun {STATIC WEB ASSETS BASE PATH} statik Web varlıkları temel yolu olduğu, kuralıyla birlikte bir proje paketi oluşturulur.

NuGet paketler veya Razor sınıf kitaplıklarıgibi diğer projeler kullanılıyorsa paketlenmiş dosya:

  • CSS içeri aktarmaları kullanarak stillere başvurur.
  • , Stilleri tüketen uygulamanın statik bir web varlığı olarak yayımlanmaz.

Alt bileşen desteği

Varsayılan olarak, CSS yalıtımı yalnızca biçimiyle ilişkilendirdiğiniz bileşen için geçerlidir {COMPONENT NAME}.razor.css ; burada yer tutucu {COMPONENT NAME} genellikle bileşen adıdır. Bir alt bileşene değişiklikler uygulamak için, ::deep Combinator üst bileşenin dosyasındaki tüm alt öğeleri kullanın .razor.css . ::deepCombinator, bir öğenin oluşturulan kapsam tanımlayıcısının alt öğeleri olan öğeleri seçer.

Aşağıdaki örnek, Parent adlı bir alt bileşen ile çağrılan bir üst bileşeni gösterir Child .

Pages/Parent.razor:

@page "/parent"

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

    <Child />
</div>

Shared/Child.razor:

<h1>Child Component</h1>

h1 Parent.razor.css ::deep h1 Stil bildiriminin üst bileşene ve alt öğelerine uygulanması gerektiğini belirtmek için Combinator ile içindeki bildirimi güncelleştirin.

Pages/Parent.razor.css:

::deep h1 { 
    color: red;
}

h1Stil artık Parent Child alt bileşen için ayrı bir kapsamlı CSS dosyası oluşturmaya gerek olmadan ve bileşenleri için geçerlidir.

::deepCombinator yalnızca alt öğeler ile kullanılabilir. Aşağıdaki biçimlendirme, h1 stilleri beklenen şekilde bileşenlere uygular. Üst bileşenin kapsam tanımlayıcısı div öğesine uygulanır, bu nedenle tarayıcı üst bileşenden stilleri devralmayı bilir.

Pages/Parent.razor:

<div>
    <h1>Parent</h1>

    <Child />
</div>

Ancak, öğesinin dışlanması alt div ilişkiyi kaldırır. Aşağıdaki örnekte, stili alt bileşene uygulanmaz.

Pages/Parent.razor:

<h1>Parent</h1>

<Child />

CSS Önişlemci desteği

CSS preiþlemcileri, değişkenler, iç içe geçme, modüller, mixıns ve devralma gibi özelliklerden yararlanarak CSS geliştirmeyi iyileştirmek için yararlıdır. CSS yalıtımı, Sass veya daha düşük gibi CSS ön işlemcilerini yerel olarak desteklemeirken, Blazor derleme işlemi SıRASıNDA CSS seçicileri yeniden yazmadan önce, ön işlemci derlemesi gerçekleştiği sürece CSS ön işlemcilerini tümleştirmek sorunsuz olur. örneğin Visual Studio kullanarak, var olan önişlemci derlemesini, Visual Studio görev çalıştırıcısı gezgininde derleme görevi olarak yapılandırın.

Delegate. sassbuildergibi birçok üçüncü taraf NuGet paketi, CSS yalıtımı gerçekleşmeden önce derleme işleminin başlangıcında sass/SCSS dosyalarını derleyebilir ve ek yapılandırma gerekmez.

CSS yalıtım yapılandırması

CSS yalıtım, kullanıma hazır çalışacak şekilde tasarlanmıştır, ancak mevcut araçlar ya da iş akışlarında bağımlılıklar olduğu gibi bazı gelişmiş senaryolar için yapılandırma sağlar.

Kapsam tanımlayıcı biçimini Özelleştir

Varsayılan olarak, kapsam tanımlayıcıları biçimini kullanır b-<10-character-string> . Kapsam tanımlayıcı biçimini özelleştirmek için, proje dosyasını istenen bir düzene güncelleştirin:

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

Yukarıdaki örnekte, için oluşturulan CSS, Example.razor.css kapsam tanımlayıcısını ' dan ' a değiştirir b-<10-character-string> my-custom-scope-identifier .

Kapsamlı CSS dosyalarıyla devralma elde etmek için kapsam tanımlayıcılarını kullanın. Aşağıdaki proje dosyası örneğinde, bir BaseComponent.razor.css Dosya bileşenler arasında ortak stiller içerir. Bir DerivedComponent.razor.css dosya bu stilleri devralır.

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

*Birden çok dosya genelinde kapsam tanımlayıcılarını paylaşmak için joker () işlecini kullanın:

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

Statik web varlıklarının taban yolunu değiştirme

scoped.styles.cssDosya, uygulamanın kökünde oluşturulur. Proje dosyasında, varsayılan yolu değiştirmek için <StaticWebAssetBasePath> özelliğini kullanın. Aşağıdaki örnek, scoped.styles.css yolundaki dosyayı ve uygulamanın varlıklarını geri kalanını şu _content yolda koyar:

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

Otomatik paketlemeyi devre dışı bırak

BlazorÇalışma zamanında bulunan kapsamlı dosyaları nasıl yayımlayıp yüklediğini devre dışı bırakmak için özelliğini kullanın DisableScopedCssBundling . Bu özelliği kullanırken, diğer araçların veya işlemlerin dizinden yalıtılmış CSS dosyalarını alma obj ve çalışma zamanında bunları yayımlama ve yükleme işlemlerinden sorumlu olduğu anlamına gelir:

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

Razor sınıf kitaplığı (RCL) desteği

Bir Razor sınıf kitaplığı (RCL) yalıtılmış stiller sağlıyorsa, <link> etiketin href özniteliği öğesine işaret eder {STATIC WEB ASSET BASE PATH}/{PACKAGE ID}.bundle.scp.css ; burada yer tutucular:

  • {STATIC WEB ASSET BASE PATH}: Statik Web varlık temel yolu.
  • {PACKAGE ID}: Sınıf kitaplığının paket kimliği. Kitaplığın proje dosyasında belirtilmemişse, paket KIMLIĞI varsayılan olarak projenin derleme adına sahiptir <PackageId> .

Aşağıdaki örnekte:

  • Statik Web varlık temel yolu _content/ClassLib .
  • Sınıf kitaplığının paket KIMLIĞI ClassLib .

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

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

RCLs hakkında daha fazla bilgi için aşağıdaki makalelere bakın: