ASP.NET MVC中如何将Content目录下的CSS文件关联至指定视图

下面是几种靠谱的实现方法，按需选用：

• 直接使用Razor解析的根路径
  MVC4及以后的Razor视图支持直接解析~为应用根目录，直接写link标签就行，路径不容易错：

  <link rel="stylesheet" href="~/Content/YourCustomStyle.css" />
  

  注意：如果你的视图是基于布局页（Layout）创建的，别直接把link写在视图任意位置，要放在@section Styles块里，这样会自动渲染到布局页的<head>区域，符合规范：

  @section Styles {
      <link rel="stylesheet" href="~/Content/YourCustomStyle.css" />
  }
  

• 使用Url.Content辅助方法（兼容旧版本）
  要是项目版本比较老，或者想确保路径绝对正确，用Url.Content()方法解析虚拟路径：

  <link rel="stylesheet" href="@Url.Content("~/Content/YourCustomStyle.css")" />
  

  同样，基于布局页的视图记得放在@section Styles里。

• 利用Bundle打包（推荐用于生产环境）
  如果项目启用了Bundle打包功能，先在App_Start/BundleConfig.cs里注册你的CSS bundle：

  public static void RegisterBundles(BundleCollection bundles)
  {
      // 其他bundle注册...
      bundles.Add(new StyleBundle("~/bundles/customstyles").Include(
          "~/Content/YourCustomStyle.css"));
  }
  

  然后在目标视图里引用这个bundle：

  @section Styles {
      @Styles.Render("~/bundles/customstyles")
  }
  

  这种方式会自动合并、压缩CSS，提升页面加载效率。

注意事项 #

• 确保CSS文件确实存在于Content目录下，文件名和大小写要匹配（Windows服务器不区分大小写，但Linux部署的话要注意）。
• 不要把link标签放在<body>标签内，尽量放在<head>区域，避免页面加载时出现样式闪烁。

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