Aracılığıyla paylaş

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

  • Makale

Not

Bu, bu makalenin en son sürümü değildir. Geçerli sürüm için bu makalenin .NET 9 sürümüne bakın.

Uyarı

ASP.NET Core'un bu sürümü artık desteklenmiyor. Daha fazla bilgi için bkz . .NET ve .NET Core Destek İlkesi. Geçerli sürüm için bu makalenin .NET 9 sürümüne bakın.

Önemli

Bu bilgiler, ticari olarak piyasaya sürülmeden önce önemli ölçüde değiştirilebilen bir yayın öncesi ürünle ilgilidir. Burada verilen bilgilerle ilgili olarak Microsoft açık veya zımni hiçbir garanti vermez.

Geçerli sürüm için bu makalenin .NET 9 sürümüne bakın.

Tarafından Dave Brock

Bu makalede CSS yalıtımının CSS'yi bileşenlere Razor nasıl kapsamladığı açıklanır. Bu, CSS'yi basitleştirebilir ve diğer bileşenler veya kitaplıklarla çakışmaları önleyebilir.

Aşağıdakileri azaltmak veya önlemek için CSS stillerini tek tek sayfalara, görünümlere ve bileşenlere yalıtır:

  • Bakımı zor olabilen genel stillere bağımlılıklar.
  • İç içe yerleştirilmiş içerikte stil çakışmaları.

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

Bileşene özgü stilleri tanımlamak için, aynı klasördeki bileşenin .razor.css dosya adıyla eşleşen bir .razor dosya oluşturun. Dosya .razor.css kapsamlı bir CSS dosyasıdır.

Dosyadaki bir ExampleExample.razor bileşen için adlı Example.razor.cssbileşenle birlikte bir dosya oluşturun. DosyaExample.razor.css, bileşeniyle (Example) aynı klasörde Example.razor bulunmalıdır. Dosyanın "Example" temel adı büyük/küçük harfe duyarlı değildir.

Example.razor:

@page "/example"

<h1>Scoped CSS Example</h1>

Example.razor.css:

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

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

Not

Paketleme sırasında stil yalıtımını garanti etmek için kod bloklarında CSS'nin Razor içeri aktarılması desteklenmez.

CSS yalıtım paketleme

CSS yalıtımı derleme zamanında gerçekleşir. Blazor CSS seçicilerini, bileşen tarafından işlenen işaretlemeyle eşleşecek şekilde yeniden yazar. Yeniden yazılan CSS stilleri, statik varlık olarak paketlenir ve oluşturulur. Stil sayfasına etiketin <head> içinde (<head> konumu) başvurulur. Proje şablonlarından <link> oluşturulan bir uygulamaya aşağıdaki Blazor öğe eklenir:

Blazor Web Apps:

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

Tek başına Blazor WebAssembly uygulamaları:

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

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

Yer {ASSEMBLY NAME} tutucu, projenin derleme adıdır.

Aşağıdaki örnek, barındırılan Blazor WebAssemblyClient bir uygulamadan alınmıştı. Uygulamanın derleme adı olur BlazorSample.Clientve proje Barındırılan <link> seçeneğiyle oluşturulduğunda proje şablonu tarafından Blazor WebAssembly eklenir (-ho|--hosted Visual Studio kullanılarak .NET CLI veya ASP.NET Temel Barındırılan onay kutusunu kullanan seçenek):

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

Paketlenmiş dosyada, her bileşen bir kapsam tanımlayıcısıyla ilişkilendirilir. Stil oluşturulmuş her bileşen için, biçiminde bir HTML özniteliği eklenir b-{STRING}; burada {STRING} yer tutucu, çerçeve tarafından oluşturulan on karakterli bir dizedir. Tanımlayıcı her uygulama için benzersizdir. İşlenen Counter bileşende, Blazor öğesine bir kapsam tanımlayıcısı h1 ekler:

<h1 b-3xxtam6d07>

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

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

Derleme zamanında, yer tutucuların bulunduğu kuralıyla obj/{CONFIGURATION}/{TARGET FRAMEWORK}/scopedcss/projectbundle/{ASSEMBLY NAME}.bundle.scp.cssbir proje paketi oluşturulur:

  • {CONFIGURATION}: Uygulamanın derleme yapılandırması (örneğin, Debug, Release).
  • {TARGET FRAMEWORK}: Hedef çerçeve (örneğin, net6.0).
  • {ASSEMBLY NAME}: Uygulamanın derleme adı (örneğin, BlazorSample).

Alt bileşen desteği

CSS yalıtımı yalnızca biçimiyle {COMPONENT NAME}.razor.cssilişkilendirdiğiniz bileşen için geçerlidir; burada {COMPONENT NAME} yer tutucu genellikle bileşen adıdır. Değişiklikleri bir alt bileşene uygulamak için, üst ::deep bileşenin .razor.css kullanın. ::deep Sözde öğe, bir öğenin oluşturulan kapsam tanımlayıcısının alt öğeleri seçer.

Aşağıdaki örnekte adlı Parent bir üst bileşen ve adlı Childalt bileşen gösterilmektedir.

Parent.razor:

@page "/parent"

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

    <Child />
</div>

Child.razor:

<h1>Child Component</h1>

Stil bildiriminin h1Parent.razor.css üst bileşene ve alt öğelerine uygulanması gerektiğini göstermek ::deep için içindeki bildirimini h1 sözde öğeyle güncelleştirin.

Parent.razor.css:

::deep h1 { 
    color: red;
}

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

Sahte ::deep öğe yalnızca alt öğeyle çalışır. Aşağıdaki işaretleme, stilleri beklendiği gibi bileşenlere uygular h1 . Üst bileşenin kapsam tanımlayıcısı öğesine uygulanır div , böylece tarayıcı stilleri üst bileşenden devralmayı bilir.

Parent.razor:

<div>
    <h1>Parent</h1>

    <Child />
</div>

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

Parent.razor:

<h1>Parent</h1>

<Child />

Sahte öğe, ::deep kapsam özniteliğinin kurala uygulandığı yeri etkiler. Kapsamlı bir CSS dosyasında CSS kuralı tanımladığınızda, kapsam en doğru öğeye uygulanır. Örneğin: div > a olarak dönüştürülür div > a[b-{STRING}]; burada {STRING} yer tutucu, çerçeve tarafından oluşturulan on karakterli bir dizedir (örneğin, b-3xxtam6d07). Bunun yerine kuralın farklı bir seçiciye uygulanmasını istiyorsanız, ::deep sözde öğe bunu yapmanıza izin verir. Örneğin, div ::deep > a olarak dönüştürülür div[b-{STRING}] > a (örneğin, div[b-3xxtam6d07] > a).

Sahte öğeyi herhangi bir HTML öğesine ekleme özelliği, işlenen HTML etiketlerinin ::deep yapısını belirleyebildiğiniz zaman diğer bileşenler tarafından işlenen öğeleri etkileyen kapsamlı CSS stilleri oluşturmanıza olanak tanır. Başka bir bileşenin içinde köprü etiketi (<a>) işleyen bir bileşen için, bileşenin bir (veya başka bir div öğe) içinde sarmalandığından emin olun ve kuralı ::deep > a kullanarak yalnızca üst bileşen işlendiğinde bu bileşene uygulanan bir stil oluşturun.

Önemli

Kapsamlı CSS, etiket yardımcısı uygulanmış öğeler dahil olmak üzere bileşenler veya Etiket Yardımcıları için değil, yalnızca HTML öğeleriRazor. Örneğin<input asp-for="..." />, .

CSS ön işlemci desteği

CSS ön işlemcileri değişken, iç içe yerleştirme, modül, mixin ve devralma gibi özellikleri kullanarak CSS geliştirmeyi iyileştirmek için kullanışlıdır. CSS yalıtımı Sass veya Less gibi CSS ön işlemcilerini yerel olarak desteklemese de, derleme işlemi sırasında CSS seçicilerini yeniden yazmadan önce Blazor ön işlemci derlemesi gerçekleştiği sürece CSS ön işlemcilerinin tümleştirilmesi sorunsuz olur. Örneğin Visual Studio'yu kullanarak mevcut ön işlemci derlemesini Visual Studio Görev Çalıştırıcı Gezgini'nde bir Derleme Öncesi görevi olarak yapılandırın.

gibi AspNetCore.SassCompilerbirçok üçüncü taraf NuGet paketi, CSS yalıtımı gerçekleşmeden önce derleme işleminin başında SASS/SCSS dosyalarını derleyebilir.

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

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

Kapsam tanımlayıcısının biçimini özelleştirme

Kapsam tanımlayıcıları biçimini b-{STRING}kullanır; burada {STRING} yer tutucu, çerçeve tarafından oluşturulan on karakterli bir dizedir. Kapsam tanımlayıcısının biçimini özelleştirmek için proje dosyasını istenen desene güncelleştirin:

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

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

Kapsamlı CSS dosyalarıyla devralma özelliği 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. DerivedComponent.razor.css dosyası bu stilleri devralır.

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

Kapsam tanımlayıcılarını birden çok dosyada paylaşmak için joker karakter (*) işlecini kullanın:

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

Kapsam tanımlayıcıları biçimini b-{STRING}kullanır; burada {STRING} yer tutucu, çerçeve tarafından oluşturulan on karakterli bir dizedir. Kapsam tanımlayıcısının biçimini özelleştirmek için proje dosyasını istenen desene güncelleştirin:

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

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

Kapsamlı CSS dosyalarıyla devralma özelliği 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. DerivedComponent.razor.css dosyası 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>

Kapsam tanımlayıcılarını birden çok dosyada paylaşmak için joker karakter (*) işlecini kullanın:

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

Statik web varlıkları için temel yolu değiştirme

Dosya scoped.styles.css , uygulamanın kökünde oluşturulur. Proje dosyasında, varsayılan yolu değiştirmek için özelliğini<StaticWebAssetBasePath>. Aşağıdaki örnek, scoped.styles.css dosyasını ve uygulamanın kalan varlıklarını _content yoluna yerleştirir:

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

Otomatik paketlemeyi devre dışı bırakma

Çalışma zamanında kapsamı belirlenmiş dosyaları yayımlama ve yükleme işlemini geri çevirmek Blazor için özelliğini kullanın DisableScopedCssBundling . Bu özelliği kullanırken, diğer araçlar veya işlemler yalıtılmış CSS dosyalarını dizinden obj alıp çalışma zamanında yayımlamak ve yüklemekten sorumludur:

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

CSS yalıtımını devre dışı bırakma

Özelliğini <ScopedCssEnabled> uygulamanın proje dosyasında olarak ayarlayarak false proje için CSS yalıtımını devre dışı bırakın:

<ScopedCssEnabled>false</ScopedCssEnabled>

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

NuGet paketindeki veya Razor sınıf kitaplığındaki (RCL) bileşenler için yalıtılmış stiller otomatik olarak paketlenir:

  • Uygulama, RCL'nin paketlenmiş stillerine başvurmak için CSS içeri aktarmalarını kullanır. adlı ClassLib sınıf kitaplığı ve stil sayfası olan bir BlazorBlazorSample.styles.css uygulama için, RCL'nin stil sayfası uygulamanın stil sayfasının en üstünde içeri aktarılır:

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

  • RCL'nin paketlenmiş stilleri, stilleri kullanan uygulamanın statik web varlığı olarak yayımlanmaz.

RCL'ler hakkında daha fazla bilgi için aşağıdaki makaleleri inceleyin: