1

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

Improve this question
17
  • I test in my blazor server app and I found hot reload didn't work for css isolation as well. Although the document here said vs 2022 + .net 6 should support CSS hot reload. I'm afraid it is due to CSS isolation occurred at build time Commented Apr 18, 2024 at 4:39
  • have you had a look at learn.microsoft.com/en-us/aspnet/core/blazor/components/… ? Commented Apr 18, 2024 at 6:32
  • @EmreBener i did but haven't found a workaround or a fix to my problem Commented Apr 18, 2024 at 9:06
  • as @TinyWang pointed out, CSS isolation occurs at build time, and the produced css files are bundled into one. This is not specific to Blazor, and the same issue exists on non-Blazor ASP.NET Core web apps. The bundling only happens once during the build and that's it. Naturally, hot reload will not work with css isolation, as there is no mechanism to re-trigger the process currently. This is a limitation of the framework. Commented Apr 18, 2024 at 10:30
  • I ran into a similar problem where using runtime razor compilation would break css isolation so I conditionally registered runtime compilation service like this: #if DEBUG mvcBuilder.AddRazorRuntimeCompilation(); #endif Meaning css isolation only worked on published builds, and I had to live without it during development just so I can have runtime razor compilation. Commented Apr 18, 2024 at 10:32

1 Answer 1

Reset to default
0

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

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I had a test in my side just now with a new blazor server .net 7 application, and I found css isolation hot reload worked now. I'm using VS Version 17.8.3

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.