npm install bootstrap 不能直接使用 JS 组件，因缺 peer dependency @popperjs/core，导致 Uncaught ReferenceError: Popper is not defined；必须显式执行 npm install bootstrap @popperjs/core 才能正常使用 Dropdown、Tooltip、Modal 等依赖定位计算的组件。
直接执行 npm install bootstrap 能装上 Bootstrap，但不等于能用——缺 @popperjs/core 就会报 Uncaught ReferenceError: Popper is not defined，尤其在用 bootstrap.js（非 bundle 版）时必现。
npm install bootstrap 为什么不能直接用 JS 组件？
Bootstrap 5+ 的 Dropdown、Tooltip、Modal 等 JS 组件底层依赖 @popperjs/core 做定位计算，而 npm install bootstrap 默认只装自身包，不自动安装该 peer dependency。
- 错误现象：
Uncaught ReferenceError: Popper is not defined或控制台提示Missing required dependency: popper.js - 正确做法：必须显式安装
npm install bootstrap @popperjs/core - 如果项目还用 jQuery（比如兼容旧插件或 Bootstrap 4 迁移），再加
npm install jquery；但 Bootstrap 5 官方已弃用 jQuery，不建议引入 -
node_modules/bootstrap/dist/js/bootstrap.bundle.min.js已内置 Popper，可绕过依赖问题，但仅限直接 script 引入场景；构建流程中仍推荐分开安装并让打包器处理依赖
用 npm 搭建 Bootstrap 环境 vs CDN 引入的取舍
CDN 是最快验证方式，npm 方式适合需要定制、构建、长期维护的项目，但代价是配置链更长、易踩依赖陷阱。
- CDN 优点：零配置、加载快（全球 CDN 缓存）、适合原型/演示/轻量页面；缺点：无法修改 SCSS 变量、无法 tree-shaking、版本更新不可控、离线失效
- npm 优点：可 import 单个组件（如
import { Modal } from 'bootstrap'）、支持 Sass 源码定制、能参与 webpack/vite 构建优化；缺点：需手动处理@popperjs/core、Sass 编译路径需配置（如includePaths）、初学者容易卡在Cannot find module 'bootstrap/scss/functions'类错误 - 若选 npm，推荐从
bootstrap-npm-starter这类模板起步，它预置了scss/目录结构和package.json中的build脚本，省去 80% 初始配置
想改主题色或删组件？npm 方式必须编译 SCSS 源码
只引入 bootstrap.min.css 文件无法覆盖变量或剔除未用样式；要真正定制，就得走 Sass 编译流。
- 关键路径：
node_modules/bootstrap/scss/是源码入口，不是dist/css/ - 典型做法：新建
src/scss/app.scss，先@import "./_custom-variables";（覆盖$primary等），再@import "bootstrap/scss/bootstrap"; - 注意：Bootstrap 5 的 Sass 文件默认不再包含
glyphicons（已移除），也不再带 jQuery 依赖逻辑，别照着 v3/v4 教程配jquery路径 - 构建工具如 Vite 需额外配置
css.preprocessorOptions.sass.includePaths，否则@import "bootstrap/scss/functions"会失败
最常被忽略的一点：npm 安装的 bootstrap 包里不含构建脚本（package.json 无 "scripts": {"dist": ...}），想跑 npm run dist 编译完整包，必须 git clone 官方仓库——npm install bootstrap 只是装「产物」，不是装「工程」。
