Как мне стилизовать страницы идентификации по умолчанию в приложении ASP.NET React JS? ⇐ CSS

[Anonymous]

Я создал веб-приложение ASP.NET React JS (.NET 7.0), используя отдельные учетные записи пользователей. Затем я использовал шаблон идентификации для добавления страниц идентификации .cshtml в папку «Области».
Я просто хочу стилизовать страницы идентификации по умолчанию, что я и пытался сделать, добавив в файле CSS Register.css в wwwroot/css. Затем я попытался сослаться на этот файл из Register.cshtml как на странице регистрации, так и на странице макета, как показано ниже:

Код: Выделить всё

[*]

Я также пробовал ссылаться на него как /css/Register.css.
Когда я запускаю свое приложение и захожу в реестр страница, когда я перехожу к инструментам разработки, я вижу, что файл CSS действительно появляется в источниках в разделе localhost > css > Register.css. Однако содержимое файла совпадает с содержимым файла index.html в папке ClientApp.
При запуске приложения оно сначала обращается к порту 7000 и что-то затем перенаправляет на порт 44000 что-то, как только SPA-прокси готов. Если я вручную перейду к localhost:7000/css/Register.css, я смогу увидеть правильное содержимое файла CSS.
Содержимое моего Program.cs< /code> в настоящее время имеют следующий вид, что близко к значению по умолчанию:

Код: Выделить всё

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
var connectionString = builder.Configuration.GetConnectionString("DefaultConnection") ?? throw new InvalidOperationException("Connection string 'DefaultConnection' not found.");
builder.Services.AddDbContext(options =>
options.UseSqlServer(connectionString));
builder.Services.AddDatabaseDeveloperPageExceptionFilter();

builder.Services.AddDefaultIdentity(options => options.SignIn.RequireConfirmedAccount = true)
.AddEntityFrameworkStores();

builder.Services.AddIdentityServer()
.AddApiAuthorization();

builder.Services.AddAuthentication()
.AddIdentityServerJwt();

builder.Services.AddControllersWithViews();
builder.Services.AddRazorPages();

builder.Services.AddSpaStaticFiles(configuration =>
{
configuration.RootPath = "ClientApp/src";
});

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
app.UseMigrationsEndPoint();
}
else
{
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthentication();
app.UseIdentityServer();
app.UseAuthorization();

app.MapControllerRoute(
name: "default",
pattern: "{controller}/{action=Index}/{id?}");
app.MapRazorPages();

app.MapFallbackToFile("index.html");

app.Run();

Аналогично содержимое моего файла setupProxy.js выглядит следующим образом:

Код: Выделить всё

const { createProxyMiddleware } = require('http-proxy-middleware');
const { env } = require('process');

const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'http://localhost:54720';

const context = [
"/weatherforecast",
"/_configuration",
"/.well-known",
"/Identity",
"/connect",
"/ApplyDatabaseMigrations",
"/_framework",
"/signin-microsoft",
"/signin-google",
"/Identity/manage"
];

module.exports = function (app) {
const appProxy = createProxyMiddleware(context, {
target: target,
secure: false,
headers: {
Connection: 'Keep-Alive'
}
});

app.use(appProxy);
};

Я попробовал несколько способов исправить это:

• Ссылка на файл CSS с использованием абсолютных и относительных путей.
• Настройка действия сборки на «копировать всегда»
• Изменение файла launchsettings.json, чтобы попытаться перейти прямо к порту 44000, но это приводит к постоянному циклу перенаправления (как и ожидалось)
• Изменение некоторых настроек в setupProxy.js, что также привело к проблемам с перенаправлением
• Изменение app.UseStaticFiles в Program.cs, чтобы разрешить неизвестные типы файлов на случай, если с этим возникнут проблемы.

Я был ожидая, что мой файл Register.css появится в источниках инструментов разработки, но в настоящее время он показывает содержимое моего файла index.html из папки ClientApp.
На самом деле я не уверен, куда двигаться дальше, поскольку это недавно созданное приложение, которое, как я ожидал, будет достаточно простым для стилизации страниц личности. Пожалуйста, дайте мне знать, если мне нужно добавить дополнительную информацию.

Подробнее здесь: https://stackoverflow.com/questions/755 ... pplication