cssasp.net-coreblazorhot-reload

Blazor css isolation hot reload not working

I have a Blazor component named Comp.razor and nested inside it is a Comp.razor.css file. All of these files are located in a class library project. In my main project (the one I launch the app from), I referenced this component and everything works fine when the app launches.

However, I am facing an issue where I am unable to see any changes when I modify the CSS file and refresh the page. Strangely, if I modify the HTML file, the changes are reflected perfectly fine, but this is not the case with the isolated CSS file.

If anyone knows how to fix this issue, please let me know. Thank you.

PS: I tried disabling browser cashing but it didn't work. //

i tried to link CSS normally without CSS isolation and i ran into CSS file not found i placed the CSS file of the component in wwwroot under the CSS directory and linked it in the component with

Solution

  • I created a blazor web app and an RCL, then in the RCL, I created a myStyle.css file and put it in wwwroot folder. Then in my RCL component, I used this class.

    enter image description here

    Following the official document to reference the component defined in RCL, and let's link to the myStyle.css file in the blazor app as well.

    Link to the library's stylesheet in the app's markup (location of content).

    enter image description here

    Just like you see, I modified <head> tag within my App.razor file, then it worked for me.

    enter image description here