Visual Studio 2019引入Bootstrap和JS后自定义CSS无法链接问题

问题排查与解决方案 #

核心问题1：CSS引入顺序错误 #

当前你将自定义CSS放在Bootstrap CSS之前加载，后加载的Bootstrap样式优先级更高，若存在规则冲突会直接覆盖自定义样式。需调整引入顺序，将自定义CSS放在所有第三方样式之后加载：

<!-- 先加载Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<!-- 最后加载自定义CSS -->
<link rel="stylesheet"  href="StyleSheet1.css">

核心问题2：Bootstrap版本不匹配 #

你引入的Bootstrap CSS为5.1.1版本，但配套JS使用的是4.5.3版本，版本不一致会导致渲染逻辑异常，甚至干扰自定义样式的解析。需统一Bootstrap版本，示例为统一使用5.1.1版本的JS：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>

替换原有三个jQuery、popper、旧版Bootstrap JS的引入即可，5.x版本的bootstrap.bundle.min.js已内置popper依赖。

核心问题3：Visual Studio 2019特有配置问题 #

这是其他编辑器正常、仅VS2019失效的主要原因，按以下步骤修正：

• 打开VS解决方案资源管理器，右键点击StyleSheet1.css选择「属性」，将「复制到输出目录」项修改为如果较新则复制，避免调试时输出目录缺失CSS文件
• 调试前按Ctrl+F5强制刷新浏览器，清除本地缓存的旧样式资源
• 若为ASP.NET/ASP.NET Core项目，将CSS路径修改为<link rel="stylesheet" href="~/StyleSheet1.css">，~会自动解析为项目根路径，避免虚拟路径导致的资源定位404问题

验证方法 #

打开页面后按F12启动开发者工具：

• 切换到「网络」面板，刷新页面查看StyleSheet1.css的请求状态，若为404则排查路径配置，若为200则继续排查样式优先级
• 切换到「元素」面板，选中id为title的section节点，查看样式面板中自定义的background-color规则是否被覆盖，若被划掉则说明优先级不足，可在规则后加!important临时验证：

#title
{
    background-color: #ff4c68 !important;
}

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