.NET 5.0 Blazor bites - Blazor 구성 요소에 대한 CSS 격리 - 2부

이전 블로그에서 기본 CSS 격리에 대해 살펴보았습니다.

이제 CSS 격리에서 몇 가지 항목을 더 살펴보겠습니다.

CSS 격리용 SASS

하위 구성 요소에 CSS 격리를 사용하는 방법

이 블로그에서는 Blazor 서버 애플리케이션의 CSS 격리를 살펴보겠습니다.

먼저 Blazor Server 애플리케이션을 만듭니다. Blazor CSS 격리는 CSS 전처리기에 대한 지원을 제공하지 않기 때문입니다. 따라서 Blazor 빌드가 완료되기 전에 전처리기가 CSS 파일로 컴파일되는지 확인해야 합니다. WebPack 또는 라이브러리와 같은 도구를 사용하여 이 프로세스를 수행할 수 있습니다. 여기서는 Delegate.SassBuilder을 선택하겠습니다.

아래 코드를 사용하여 이 NuGet 패키지 참조를 프로젝트에 추가합니다.

<ItemGroup>
    <PackageReference Include="Delegate.SassBuilder" Version="1.4.0"></PackageReference>
  </ItemGroup>

SCSS 파일 확장자가 뒤에 오는 component.razor를 사용하여 SCSS 파일을 프로젝트에 추가합니다. 여기에서는 index.razor용 SCSS 파일을 추가하고 H1 태그를 사용자 지정합니다. Index.razor.scss를 추가하고 아래 코드를 포함합니다.

$primary-color: red;

h1 {
    color: $primary-color;
}

이렇게 하면 프로젝트를 빌드할 때 Index.razor.css가 생성됩니다.
참고: CSS 격리는 빌드 시간 단계이므로 CSS 파일을 변경할 때마다 다시 빌드해야 합니다.


응용 프로그램을 다시 빌드하고 시작하여 Blazor 인덱스 구성 요소 H1 태그 요소에 적용된 범위 지정 스타일을 확인합니다.



이제 자식 구성 요소에 대한 특정 스타일을 작성하지 않고 자식 구성 요소에 대해 CSS 격리가 작동하도록 할 것입니다. 이렇게 하려면 Index.razor.scss 파일의 CSS 선택기에::deep을 추가해야 합니다.

$primary-color: red;

::deep h1 {
    color: $primary-color;
}

이를 확인하기 위해 H1 태그 요소가 있는 Index.razor 파일에 Counter 구성 요소를 추가할 수 있습니다. 이 작업이 완료되면 응용 프로그램을 다시 빌드하고 시작합니다. 구조화된 마크업을 Blazor에서 인식할 수 없기 때문에 작동하지 않습니다. 이 문제를 해결하려면 **DIV* 태그 요소* 내에서 부모 및 자식 구성 요소를 래핑합니다.

<div>
    @*Parent*@ 
        <h1>Hello, world!</h1>

        Welcome to your new app.
    @*Child*@ 
      <Counter></Counter>
</div>

Blazor에서 이 CSS 격리를 비활성화할 수 있습니까? 예, 가능하지만 .NET 5.0의 모든 RC 버전에서 사용할 수 있습니다. 아래 내용을 간략히 참고해주세요

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

https://github.com/dotnet/AspNetCore.Docs/issues/19360#issuecomment-691120629

Blazor 하위 구성 요소에 대한 Scoped CSS를 달성하고 Blazor CSS 격리에 SASS를 사용하는 방법을 즐겼기를 바랍니다. 참고하실 수 있도록 샘플 링크https://github.com/Sridhar-Narasimhan/Blazor-css-isolation/tree/master/CSSIsolation를 첨부했습니다.