如何在cshtml文件中引入外部CSS文件？

问题原因 #

1. HTML结构错误：<head> 标签仅用于存放元数据、资源引用等非可见内容，你当前将页面可见的标题div写在了head标签内，属于结构错误。
2. 静态资源服务配置缺失/路径不匹配：ASP.NET MVC (.NET Core/.NET 5+ 版本) 默认仅允许访问 wwwroot 目录下的静态资源，你如果将Content文件夹放在项目根目录而非wwwroot下，默认无法被访问到，同时需要确认是否开启了静态文件中间件。

解决步骤 #

1. 修正cshtml文件结构

如果你的项目使用了公共布局页_Layout.cshtml，建议通过section注入样式资源，调整后代码如下：

@model mvc.Models.LoginViewModel
@{
    ViewData["Title"] = "Login";
}

<!-- 注入样式到布局页的头部区域 -->
@section Styles {
    <link rel="stylesheet" href="~/Content/login.css" type="text/css" />
}

<!-- 页面可见内容统一放在body区域，不要写入head标签 -->
<div class="text-center">
    <h1 class="display-4">Login Page</h1>
</div>

如果没有使用布局页，手动补全完整的HTML结构即可：

@model mvc.Models.LoginViewModel
@{
    ViewData["Title"] = "Login";
}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="~/Content/login.css" type="text/css" />
</head>
<body>
    <div class="text-center">
        <h1 class="display-4">Login Page</h1>
    </div>
</body>
</html>

2. 配置静态资源访问

• 确认项目的Program.cs（.NET 6+）或Startup.cs（.NET Core 3.1及更早版本）中，在路由配置之前已经添加了静态文件中间件：

app.UseStaticFiles();

• 将你的Content文件夹移动到项目根目录下的wwwroot文件夹内（如果没有wwwroot文件夹，右键项目新建对应名称的文件夹即可），~符号在.NET MVC中默认解析为wwwroot目录的路径，移动后路径~/Content/login.css就能正确匹配到资源。
• 如果你不想把Content放在wwwroot下，可以添加额外的静态资源目录配置：

using Microsoft.Extensions.FileProviders;

app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(builder.Environment.ContentRootPath, "Content")),
    RequestPath = "/Content"
});

3. 验证资源路径

项目启动后，直接在浏览器地址栏输入{你的站点地址}/Content/login.css，如果可以正常打开CSS文件的内容，说明资源路径配置正确，此时页面样式即可正常生效。

内容的提问来源于stack exchange，提问作者QueryMan