cssvisual-studiodotnet-aspire

Aspire sample app - hidden css Web.styles.css?

I have created the Aspire sample app in Visual Studio 2022. in App.razor you can see it references the stylesheet styles.css under the Web project:

App.razor file content

I had no problem finding app.css, but I can't seem to find styles.css, is it a hidden file or something only present at runtime?? I can actually find the file in the debug folder and nowhere else. Here is a screenshot of the files and folders in Solution Explorer:

project structure

You can see other default CSS files there, but no styles.css. I also tried doing a code search in Visual Studio, it finds styles.css in App.razor but nowhere else. I would like to be able to access the file and make modifications. Does anyone know where/how to locate it?

Also I tried commenting out the line in App.razor and I can see the styling on the pages is different, so I know it's being applied.

Solution

  • The file AspireSampleApp.Web.styles.css is a CSS bundle created from the CSS found under each of your Razor components. In your solution explorer you can find these under Components/Layout/ in your web app (AspireSampleApp.Web).

    For more information see:

    ASP.NET Core Blazor CSS isolation