如何在React应用中导入本地Bootstrap CSS且不覆盖自定义CSS

方案1：直接在HTML中引入本地Bootstrap文件（零现有代码修改） #

该方案完全沿用你之前CDN引入的逻辑，仅需将link标签的资源地址替换为node_modules内的本地文件路径，放在所有自定义CSS的link标签之前即可，和原有使用体验完全一致：

<link
  href="./node_modules/bootstrap/dist/css/bootstrap.min.css"
  rel="stylesheet"
>
<!-- 后续按原有顺序放置所有自定义CSS的link标签 -->
<link rel="stylesheet" href="./your-custom.css">

方案2：调整@import导入的加载顺序 #

如果你必须通过CSS的@import规则引入Bootstrap，只需遵循两个加载规则即可避免覆盖问题：

1. 所有@import语句必须放在当前CSS文件的最顶部，前面不能有任何自定义样式规则，否则导入会失效
2. 包含Bootstrap导入语句的CSS文件，在HTML的link标签引入顺序上，要放在所有其他自定义CSS文件之前

示例结构：
index.css内容：

/* 第一行导入Bootstrap，前面不能写其他样式 */
@import "bootstrap/dist/css/bootstrap.min.css";
/* 这里写当前文件的自定义样式，会自动覆盖Bootstrap同优先级规则 */
body {
  /* 你的自定义样式 */
}

HTML引入顺序：

<!-- 先引入包含Bootstrap导入的CSS文件 -->
<link rel="stylesheet" href="./index.css">
<!-- 再引入其他所有自定义CSS文件 -->
<link rel="stylesheet" href="./other-custom.css">

异常排查 #

如果调整顺序后仍存在覆盖问题，可优先检查两个点：

• node_modules安装的Bootstrap版本是否和之前使用的CDN版本一致，版本差异可能导致默认样式规则、优先级发生变化
• 检查自定义CSS是否存在语法错误，导致部分样式失效被Bootstrap默认样式覆盖

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