Why CSS Isolation in Blazor is not working?

Question

I read in many tutorials :

• Just create a file containing the same filename of the page plus .css - Example: for Orders.razor, create a file Orders.razor.css

• Add your style on the css file and have fun

Ok, but this is not working. So, what is the correct approach ? To reproduce:

• Create a new solution, client side
• Wait for the solution being created and the sample boilerplate (counter, fetchdata, etc)
• On the pages folder, create a file"Index.razor.css"
• On the created file, add: h1 { color : red }
• Execute the solution

Expected result: Hello, world! in red

Received: Hello, world! in black

Index.razor

@page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />

Index.razor.css

h1 {
   color: red
}

Answer 1

For .razor.css files to work, you need to be using .net5

Take a look at the docs and see if you didn't miss any step