不能只靠CDN引入Bootstrap CSS，因为其无法参与Webpack/Vite构建流程导致tree-shaking等失效、样式加载时机不可控易引发FOUC、本地热更新不触发CSS重载；生产环境应npm安装后import 'bootstrap/dist/css/bootstrap.min.css'并同步安装@popperjs/core。
直接 import CSS 文件是最稳妥、最可控的方式，CDN 仅适合原型验证，别在生产环境里用。
为什么不能只靠 CDN 引入 Bootstrap CSS？
CDN 方式（比如在 public/index.html 里加 <link>）看似省事，但会带来三个实际问题：
- 无法参与 Webpack 或 Vite 的构建流程，tree-shaking、source map、CSS 压缩全失效
- 样式加载时机不可控，SSR 或严格模式下容易出现 FOUC（闪白）或类名未生效
- 本地开发时热更新不触发 CSS 重载，改了
custom.scss也看不到效果
真正能和 React 生态对齐的做法，是把 Bootstrap CSS 当作一个普通模块导入。
npm 安装 + import 'bootstrap/dist/css/bootstrap.min.css' 是标准做法
执行安装命令：npm install bootstrap @popperjs/core（注意：漏掉 @popperjs/core 会导致 Dropdown、Tooltip 定位错乱）
立即学习“前端免费学习笔记（深入）”；
然后在 src/index.js 或 src/App.js 顶部加一行：
import 'bootstrap/dist/css/bootstrap.min.css';
这个路径指向的是已编译好的 CSS，体积小、兼容性好。别导入 scss 源文件——除非你真要定制变量，否则纯属增加构建负担。
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。
常见错误现象：Uncaught TypeError: Cannot read properties of undefined (reading 'offsetParent')，基本就是 @popperjs/core 没装或版本不匹配（Bootstrap 5.3+ 要求 @popperjs/core@^2.11.8）。
想自定义主题？用 Sass 变量覆盖，而不是改 CSS 文件
如果你需要调整颜色、断点或圆角等，应该新建一个 src/custom.scss，按顺序写：
$primary: #3498db;<br>$grid-breakpoints: (sm: 576px, md: 768px, lg: 992px, xl: 1200px);<br>@import '~bootstrap/scss/functions';<br>@import '~bootstrap/scss/variables';<br>@import '~bootstrap/scss/mixins';<br>@import '~bootstrap/scss/bootstrap';
再把这文件 import 进 index.js，就能覆盖默认值。千万别直接修改 node_modules/bootstrap 里的文件——下次 npm install 就没了。
注意：Sass 导入顺序不能乱，functions 必须在 variables 前，否则变量重定义无效。
和 CSS Modules / Tailwind 混用时，类名冲突怎么防？
Bootstrap 的类名（如 btn、container）是全局的，和你自己的 Button.module.css 不冲突，但和 Tailwind 的 flex、text-sm 也不冲突——它们只是选择器优先级不同。
真正要小心的是：
- 你自己写的全局 CSS（比如
button { margin: 0; }）可能覆盖 Bootstrap 的默认边距 - 多个 CSS 框架同时 import，比如既引了 Bootstrap 又引了 Ant Design，按钮尺寸、字体大小会打架
- 使用
!important的第三方库（某些 UI 组件）可能强行压过 Bootstrap 的响应式栅格
建议：把 Bootstrap CSS 放在所有自定义样式之前 import，让局部样式有机会用更高优先级覆盖它，而不是反过来。
