Blazor empty template doesn't load scoped CSS

[SteveSandersonMS]

The new empty template does not contain a tag like this in index.html:

<link href="MyProjectName.styles.css" rel="stylesheet" />

... and so, by default, scoped CSS is not loaded or applied. Obviously people can add this manually, but it's very nonobvious, and breaks many docs/tutorials that tell you that scoped CSS just works without further manual steps. For example you might add a reference to QuickGrid and expect its built-in styles to show up automatically, but they won't unless you add this hard-to-know-about tag.

You could argue that this is by design because the "empty" template is, well, empty. But we have to strike a balance between emptiness and usability, and in this specific case, I think the surprisingness of this problem and the nonobviousness of the solution would land us on the side of wanting it to work by default.

Solution

This is a bit awkward to solve because we can't simply add that <link> tag to the template. Until your project contains some scoped CSS, you'd get a 404 for that file.

Ideally we would serve an empty file rather than a 404, and then the template could contain the <link> tag by default. People who don't want to use scoped CSS at all can simply remove the tag.

Thanks for contacting us.

We're moving this issue to the .NET 8 Planning milestone for future evaluation / consideration. We would like to keep this around to collect more feedback, which can help us with prioritizing this work. We will re-evaluate this issue, during our next planning meeting(s).
If we later determine, that the issue has no community involvement, or it's very rare and low-impact issue, we will close it - so that the team can focus on more important and high impact issues.
To learn more about what to expect next and how this issue will be handled you can read more about our triage process here.

[mkArtakMSFT]

Options we've discussed

• a code commend in current template (empty) reminding the developer to add the missing link
• update to our docs to suggest the above
• empty file (as described in the issue description)

[jessegood]

Just my 2 cents, but I ran into this issue because I misread the following line in the docs.

The following element is added by default to an app created from the Blazor project templates, where the placeholder {ASSEMBLY NAME} is the project's assembly name:

My suggestion would be to make it:

The following element is already included in an app created from the standard Blazor project templates, where the placeholder {ASSEMBLY NAME} is the project's assembly name, however for the empty Blazor project templates you are required to add it yourself.