After creating an ASP.NET React JS web application (.NET 7.0) with individual user accounts, I utilized the identity scaffold to incorporate the identity .cshtml pages into the 'Areas' folder.
My goal was to style the default identity pages by adding a css file named Register.css into the wwwroot/css directory. I attempted to reference this file from both the Register and layout pages using the following code:
<link rel="stylesheet" type="text/css" href="~/css/Register.css" />
I also tried referencing it as /css/Register.css.
Upon inspecting the sources in the dev tools while running the application and visiting the register page, I noticed that the css file appeared under localhost > css > Register.css. However, the contents of the file were actually those of the index.html file located in the ClientApp folder.
The application initially runs on port 7000 something before redirecting to port 44000 something once the SPA proxy is set up. Accessing localhost:7000/css/Register.css manually showed the correct css content.
Below are the current contents of my Program.cs file which closely resembles the default setup:
(contents of Program.cs here)
Similarly, the contents of my setupProxy.js file are as follows:
(contents of setupProxy.js here)
Despite trying various solutions such as referencing the css file using absolute and relative paths, setting the build action to 'copy always', adjusting settings in launchsettings.json, modifying setupProxy.js, and changing app.UseStaticFiles in
Program.cs</code, the issue persists.</p>
<p>My expectation was for the <code>Register.cssindex.html file within the ClientApp folder.
At this point, I am unsure about further steps to take, considering this is a newly created application intended for simple styling of the identity pages. Any additional guidance or information required would be appreciated.