ASP.NET Core中Razor页面链接CSS失败求助，附文件夹结构

阿华AIGC实验室

2026-5-15

解决ASP.NET Core Razor/MVC视图无法加载CSS的问题

别着急，我之前也碰到过一模一样的情况，大概率是静态文件服务没配置到位或者路径引用出了问题，按下面的步骤一步步排查就能解决：

第一步：确认静态文件中间件已启用

ASP.NET Core不会自动开放wwwroot目录的访问权限，必须在Program.cs里添加静态文件中间件，才能让浏览器访问到里面的CSS、JS等资源。打开你的Program.cs，确保有这行关键代码，而且位置要正确：

var app = builder.Build();

// ... 其他配置（比如HttpsRedirection、ExceptionHandler）

// 这行必须加，位置要在UseRouting之前、HttpsRedirection之后
app.UseStaticFiles();

app.UseRouting();
// ... 后续的Authorization、MapRazorPages/MapControllerRoute等配置

要是漏掉了app.UseStaticFiles()，不管你怎么写路径都访问不到wwwroot里的文件。

第二步：正确引用CSS文件

在你的Views/Home/index.cshtml里，别用容易出错的相对路径（比如../../Styles/Homepage.css），直接用ASP.NET Core的路径约定：用~/开头，它会自动映射到wwwroot目录。推荐两种写法：

<head>
    <!-- 写法1：带版本号，自动避免浏览器缓存问题 -->
    <link rel="stylesheet" href="~/Styles/Homepage.css" asp-append-version="true" />
    
    <!-- 写法2：用标签助手，框架自动解析路径 -->
    <link rel="stylesheet" asp-href="~/Styles/Homepage.css" />
</head>

第三步：检查细节避坑

大小写要一致：Windows系统不区分文件名大小写，但部署到Linux服务器上就会报错，确保代码里写的Homepage.css和wwwroot/Styles下的文件名完全匹配。
强制刷新清缓存：有时候浏览器会缓存旧的无效资源，按Ctrl+F5强制刷新页面，或者用上面的asp-append-version="true"，让框架自动给文件加版本号，每次文件更新都会生成新URL，彻底解决缓存问题。
核对路径拼写：再仔细检查一遍文件夹结构——是wwwroot/Styles不是wwwroot/Style，文件名是Homepage.css不是HomePage.css，别因为拼写小错误浪费时间。