"New .razor.scss files are not applied until the editor restarts"
A new PanelComponent works — OnStart and OnTreeBuilt both fire, the panel is in the render tree, and inline styles (style="background:red") render correctly — but nothing from the sibling .razor.scss file applies. The root element's width: 100% / height: 100% never take effect, so the root auto-sizes to its content. Any child positioned with right: Npx lands off-screen because it's measured from a zero-width root's right edge.
Editing, renaming, adding @attribute [StyleSheet], or touch-saving the .scss file during the session all fail to make the running editor pick it up. The razor component itself recompiles on every save (code changes are live), but the stylesheet stays stale.
The editor's SCSS compilation pipeline discovers stylesheet files at startup. A .razor.scss file created while the editor is already running is not registered into the live compilation — the file exists on disk but the compiler never picks it up for this session. This is the same family of issue as newly created .vmdl files or regenerated textures that need an "editor kick" to appear.
Restart the editor. The stylesheet is correct and will compile and apply on the next fresh editor start — this is the clean fix. Every other panel in a typical project works this way (their .scss files existed before the session started).
Workaround for in-session testing: if you need the panel to be usable during the current session without the stylesheet, set critical layout properties in C#:
protected override void OnTreeBuilt()
{
Panel.Style.Width = Length.Percent(100);
Panel.Style.Height = Length.Percent(100);
}But children still need their own styling, so this is a partial fix at best.
Diagnosis recipe to isolate this issue quickly (it can look like a compile or render-pipeline problem):
- Add
Log.Infocalls inOnStartandOnTreeBuilt— if they fire, the component code is live and it's NOT a stale-assembly or compile problem. - Put an inline-styled test box at
left: Npx(notright:) — if it renders, the render pipeline is working and the ONLY missing piece is the stylesheet.
The SCSS compiler's file-discovery pass runs once at editor startup. Hot-reload covers changes to existing files but not new files entering the compilation set. The editor restart triggers a fresh discovery pass that finds the new .razor.scss and compiles it into the stylesheet bundle.