Bootstrap 5 Primary颜色SCSS覆盖失效：点击外链按钮后恢复默认

问题原因分析 #

• 重复引入Bootstrap样式：同时加载了CDN的Bootstrap 5 CSS和自己编译的包含Bootstrap的CSS，导致样式优先级冲突；
• 版本不兼容：使用Bootstrap 5的CSS却引入了Bootstrap 4的JS脚本，点击按钮时旧版本JS可能触发了样式修改，覆盖自定义颜色；
• 样式加载顺序不当，进一步加剧了优先级冲突问题。

解决方案 #

1. 移除重复的Bootstrap CSS引入

删除HTML中CDN的Bootstrap 5 CSS链接，因为自定义SCSS已经导入并编译了完整的Bootstrap样式，无需重复加载：

<head>
  <meta charset="UTF-8" />
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1, shrink-to-fit=no"
  />
  <!-- 移除以下CDN样式引入 -->
  <!-- <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
    crossorigin="anonymous"
  /> -->
  <link rel="stylesheet" href="./html/index.css" />
  <link rel="stylesheet" href="./html/animations.css" />
  <title>title</title>
  <script defer src="../render.js"></script>
</head>

2. 统一Bootstrap版本，替换为Bootstrap 5的JS

Bootstrap 5不再依赖jQuery，直接使用官方提供的bundle版本（包含Popper）替换原有Bootstrap 4及jQuery相关脚本：

<!-- 移除原有jQuery、Popper和Bootstrap 4脚本，替换为以下内容 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

3. 重新编译SCSS并验证路径

确认SCSS文件中Bootstrap的导入路径正确，然后重新编译：

sass index.scss index.css

4. 检查按钮事件逻辑

当前window.open("", "_blank")仅打开空白页，不会影响样式，但如果后续有DOM操作逻辑，需确保未误修改按钮的类名或内联样式。

按钮效果对比 #

• 点击前：
• 点击后：

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