如何在ASP.NET Core的_Layout.cshtml中关联CSS并解决样式修改不生效问题

现有_Layout.cshtml代码 #

@using Microsoft.AspNetCore.Hosting
@using Microsoft.AspNetCore.Mvc.ViewEngines
@inject IWebHostEnvironment Environment
@inject ICompositeViewEngine Engine
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - MerchShop</title>
    
    <environment include="Development">
        <link rel="stylesheet" href="~/Identity/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/Identity/css/site.css" />
    </environment>
</head>

问题解决方案 #

按照优先级从高到低排查：

• 浏览器静态资源缓存问题
  这是最常见的原因，浏览器会默认缓存css/js等静态文件，修改后读取的还是旧版本。解决方法：
  打开页面后按Ctrl+F5强制刷新忽略缓存，或者按F12打开开发者工具，切换到「网络」标签，勾选「禁用缓存」，之后保持DevTools打开状态刷新页面即可。
• 运行环境不匹配问题
  你的样式引用全部包裹在<environment include="Development">标签内，只有当前运行环境是Development时才会加载这两个css。如果你切换到了Staging/Production环境，这两行引用会直接失效，默认脚手架会在下方的<environment exclude="Development">标签内引用压缩版的bootstrap.min.css和site.min.css，你修改未压缩的css文件自然不会生效。
  可以确认当前运行环境，修改对应环境引用的css文件，或者把样式引用移到environment标签外，所有环境统一加载。
• Identity页面未使用你修改的Layout
  身份验证脚手架生成的页面默认会使用Areas/Identity/Pages/_Layout.cshtml作为布局，而非你项目根目录/Pages/Shared下的_Layout.cshtml。你可以检查Areas/Identity/Pages/_ViewStart.cshtml文件内指定的Layout路径，确认是否为你修改的布局文件。
• React项目自行引入了样式
  你使用的是React+ASP.NET Core混合项目，很可能在React前端代码（比如src/index.js/src/App.js）中已经通过import引入了bootstrap样式，打包后会直接嵌入到React的产物中，你修改wwwroot下的bootstrap.css自然不会生效。你可以打开F12的「网络」标签，筛选css资源，看当前页面加载的bootstrap来源是wwwroot下的静态文件还是React打包后的资源。
• CSS优先级覆盖问题
  如果你写的site.css样式被bootstrap的样式覆盖，可以打开F12的「元素」面板，查看对应元素的样式列表，你写的样式如果被划掉，就是优先级不足。可以通过提高选择器优先级，或者临时加!important测试是否是该问题。

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