npm install bootstrap后CSS/JS文件真实路径是node_modules/bootstrap/dist/css/bootstrap.min.css和dist/js/bootstrap.bundle.min.js；常见错误是误用bootstrap/css/等不存在路径导致404。
npm install bootstrap 后找不到 CSS/JS 文件路径
Bootstrap 5.3 的 node_modules/bootstrap/dist/ 下默认只有 css/ 和 js/ 两个子目录，但部分旧教程或 IDE 自动补全会误推 bootstrap/css/bootstrap.min.css 这类错误路径。真实路径是 bootstrap/dist/css/bootstrap.min.css。
常见错误现象：404 Not Found 加载失败、浏览器控制台报 Failed to load resource；根源是 HTML 中 <link href="...> 或构建工具配置写错了层级。
- 确认安装后执行
ls node_modules/bootstrap/dist/，看到的是css/、js/、scss/，没有顶层bootstrap/目录 - HTML 中应写成：
<link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> - 若用 Vite/Webpack，推荐用模块导入方式（如
import 'bootstrap/dist/css/bootstrap.min.css'），避免硬编码路径
本地部署时要不要复制静态资源到 public/ 目录
取决于你的服务模式：直接用 Live Server 打开 HTML，必须把 bootstrap.min.css 和 bootstrap.min.js 复制进 public/ 或同级 assets/；但用 Node.js 服务（如 Express）或构建工具（Vite、Webpack），则无需复制，靠模块解析或静态托管中间件即可。
性能影响明显：复制会导致资源冗余、更新不同步；而动态引用 node_modules 路径在开发期更可控，上线前再由构建工具自动提取压缩。
- Live Server 场景（无后端）：必须复制，否则浏览器因跨域或路径限制无法加载
node_modules内容 - Express 静态托管：用
app.use('/static', express.static('node_modules/bootstrap/dist'))，HTML 中引用/static/css/bootstrap.min.css - 构建项目中：直接
import，让打包器处理依赖图，CSS 会被自动提取、JS 会被 tree-shaking
Bootstrap 静态资源的 CDN vs 本地部署取舍
CDN（如 jsDelivr）适合原型、演示、低流量页面；本地部署适用于需离线运行、定制主题、规避外链风险或企业内网环境。
容易被忽略的兼容性点：Bootstrap 5.3 不再支持 IE，但如果你项目仍需兼容旧浏览器，CDN 上的版本可能缓存了旧版文件（比如 https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js 是确定的，但不带版本号的链接可能指向未知版本）；本地部署可锁定 package.json 中的 exact version（如 "bootstrap": "5.3.0"），避免意外升级破坏样式。
- CDN 优势：减少自身服务器带宽压力、利用边缘节点加速、用户可能已有缓存
- 本地劣势：增加构建体积（约 200KB+ 压缩后）、需手动更新版本、SCSS 源码需额外配置编译流程
- 真正关键的权衡点不是“快不快”，而是“可控不可控”——CI/CD 流程中，本地依赖比外部 CDN 更易审计和回滚
使用 bootstrap/scss 源码定制主题时的常见坑
想改颜色、断点或禁用某组件？别直接改 dist/css 下的 CSS 文件——那是构建产物，改了也没用。必须从 node_modules/bootstrap/scss/ 入口开始重编译。
典型错误：只覆盖 $primary 变量却忘了 @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; 的加载顺序，导致变量未生效；或漏掉 @import "bootstrap/scss/utilities"，使 .text-primary 类丢失。
- 最小可用 SCSS 入口模板：
@import "../node_modules/bootstrap/scss/functions"; @import "../node_modules/bootstrap/scss/variables"; $primary: #0d6efd; @import "../node_modules/bootstrap/scss/mixins"; @import "../node_modules/bootstrap/scss/root"; @import "../node_modules/bootstrap/scss/reboot"; @import "../node_modules/bootstrap/scss/type"; // ……按需导入，不要全量 @import "bootstrap/scss/bootstrap"
- 构建时确保 Sass 编译器支持
module模式（Dart Sass ≥1.33），否则@use语法会报错 - 修改
_variables.scss后，必须重新编译整个 Bootstrap SCSS 树，不能只编译单个文件
