Asp.Net Core 6 Angular项目脚手架Identity引入Bootstrap样式报错问询

算力阿峰

2026-10-9

报错根因

你遇到的Refused to apply style from 'xxx' because its MIME type ('text/html') is not a supported stylesheet MIME type报错，本质是服务端没有找到对应的bootstrap.min.css静态文件，返回了404错误的HTML响应页，触发了浏览器的严格MIME类型校验规则。

可行解决方案

确认静态文件中间件配置顺序正确
打开项目根目录的Program.cs文件，确认app.UseStaticFiles()的注册顺序在路由、认证授权中间件之前，示例配置参考：

var builder = WebApplication.CreateBuilder(args);
// 注册服务逻辑省略
var app = builder.Build();
if (!app.Environment.IsDevelopment())
{
    app.UseHsts();
}
app.UseHttpsRedirection();
// 静态文件中间件必须放在前面，否则无法正常提供wwwroot下的静态资源
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
// 其他中间件、路由映射逻辑省略
app.Run();

确认静态文件物理路径存在
打开项目的wwwroot/lib/bootstrap/css目录，确认物理路径下确实存在bootstrap.min.css文件。如果文件不存在，右键项目选择「添加->客户端库」，搜索bootstrap选择对应版本安装到默认的wwwroot/lib/bootstrap路径即可。
修正样式引入路径
Identity页面的布局文件（默认路径Areas/Identity/Pages/Shared/_Layout.cshtml）里，将样式引入的波浪线前缀去掉，改用根路径相对写法：
```
<link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.min.css" />
```
如果是在Angular侧引入全局样式，打开angular.json在build.options.styles数组中添加路径即可：
```
"styles": [
  "src/styles.css",
  "wwwroot/lib/bootstrap/css/bootstrap.min.css"
]
```
Bootswatch样式适配调整
若要使用Bootswatch主题覆盖默认Bootstrap样式，不要同时引入原生Bootstrap和Bootswatch的CSS文件，直接将Bootswatch对应主题的bootstrap.min.css放到wwwroot下的自定义目录，单独引入该文件即可避免样式冲突。