Hot reload of scoped css in blazor not working for newly added css files

[vsfeedback]

This issue has been moved from a ticket on Developer Community.

---

[severity:It bothers me. A fix would be nice] When using dotnet watch run, hot reload does not work for scoped css files that have recently been added.

Every time I make a change in the scoped css file, the console tells me that "Hot reload of scoped css succeeded", but when inspecting in Chrome I loose all the styling that is in that css file. I have to rebuild (Ctrl+R) to get the styling back.

The element label/id [b-owbhi4vrwm] stays the same, but the problem seems to be that all the styling of the scoped css file disappears from the generated css file {ProjectName}.styles.css?nonce={some_kind_of_id}.

It seems like this appears whenever I add a new scoped css file. After restarting Visual Studio (Version 17.5.0 Preview 6.0) and restarting console with dotnet watch run (sdk 7.0.200-preview.22628.1) it seems to work again.

---

Original Comments

(no comments)

---

Original Solutions

(no solutions)

[mkArtakMSFT]

I was able to validate and confirm this. I've tried this on a Blazor WebAssembly Hosted app. While dotnet-watch was running, I've added a Counter.razor.css file and dotnet watch did detect a change. Then I've made some style changes to it and saved it, and dotnet watch noticed the change and written the following to the console:

Hot reload for scoped css succeeded.

However, the changes weren't showing up on the page. Changing style for an existing scoped css file worked as expected.

[mkArtakMSFT]

@SteveSandersonMS do you think this is something we control on our end when we actually apply CSS changes, or is this something inside dotnet-watch / hot reload logic that should be looked at? //cc @MackinnonBuck

[SteveSandersonMS]

I'm pretty sure this isn't an issue inside the browser-side logic that applies the changes, because it doesn't know anything about the original source files and which of them might be new.

It's much more likely to be inside watch or the IDE-side hot reload code since that does know about your source files on disk.

[mkArtakMSFT]

Thanks @SteveSandersonMS. @tmat reassigning back to you to investigate.

[SteveSandersonMS]

@tmat Would you mind moving this to a milestone so it no longer shows up in our triage query? Thanks!

[BillHiebert]

@mkArtakMSFT not sure why this is assigned to me. The scenario is with dotnet watch.

[UltraWelfare]

This happens to me as well using dotnet watch

[jorge-teixeira]

Same problem where dotnet watch