Im completely new to blazor and im trying to add a component from a razor class library to a blazor app.
Im using the default blazor app (.net5) and razor class library (.net5).
Im adding the default component (Component1) to the blazor index page.
The only thing ive done in the class library is adding a file called Component1.razor.css containing:
h1{
color: green;
}
The .css file is correctly bundled into _content/ComponentLibrary/Component1.razor.rz.scp.css and imported correctly in Blazorapp.styles.css
The scoped identifier in the css file:
h1[b-r7wl1itmzi]{
color: green;
}
However the <h1>Counter</h1> on the page has not gotten the b-r7wl1itmzi scope added to the h1 element.
If i copy the Component1 component to the blazor app it works as expected and markup is <h1 b-r7wl1itmzi>Counter</h1>.
What am i missing here?
Referencing this question Blazor CSS Isolation not working and not adding scope identifiers after migrating to .NET 5.0 and using SASS i found a solution.
It turned out that the class library had the <RazorLangVersion>3.0</RazorLangVersion> property in the .csproj file. After removing that line its works as expected.