不能直接 import 单个 bootstrap css 文件，因其 dist/css/bootstrap.min.css 是全量编译产物，依赖严格顺序（如 reboot 必须在 utilities 前），手动拆分会导致类名失效、重置丢失、断点错乱；真正按需须用 sass 源码自定义导入模块，按 functions→variables→mixins→reboot→grid→utilities 等顺序显式引入所需部分。
为什么不能直接 import 单个 Bootstrap CSS 文件
Bootstrap 的 dist/css/bootstrap.min.css 是一个全量编译产物，内部依赖顺序严格（比如 reboot.css 必须在 utilities.css 之前），手动拆分引入会导致类名失效、重置样式丢失、响应式断点错乱。你看到的「按需」不是指删掉某几行 CSS，而是控制哪些模块参与构建。
真正可控的按需方式：用 Sass 源文件 + 自定义导入列表
npm 安装后，node_modules/bootstrap/scss/ 下提供了可组合的源文件。你需要新建一个 src/custom-bootstrap.scss，显式声明只加载需要的部分：
@import '~bootstrap/scss/functions';@import '~bootstrap/scss/variables';@import '~bootstrap/scss/mixins';@import '~bootstrap/scss/reboot';-
@import '~bootstrap/scss/grid';（仅栅格系统） -
@import '~bootstrap/scss/utilities';（仅间距、文字、显示等工具类） - 跳过
components、forms、tables等整块——除非你真用到按钮或表单组件
然后在 src/index.js 中 import './custom-bootstrap.scss';。Webpack/Vite 会据此生成最小 CSS 包，tree-shaking 生效，且保留所有变量和 mixin 可用性。
React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。
常见错误：试图用 CSS @import 或 link 标签“按需”
在 public/index.html 里写多个 <link href="...utility-spacing.css"> 不可行——Bootstrap 官方根本不发布这种拆分的 CSS 文件；第三方打包的“mini-css”往往缺失依赖或版本错配，col-6 可能渲染成 display: block 而非 flex。CDN 引入也完全无法控制加载粒度。
如果只用栅格和工具类，别碰 JS 组件
只要不使用 Modal、Dropdown 这类依赖 @popperjs/core 的功能，就无需安装 @popperjs/core —— 它占体积且无意义。但注意：bootstrap/dist/css/bootstrap.min.css 本身不包含 JS 逻辑，所以即使你只 import 这个文件，也不触发 Popper 报错；报错只发生在你调用 new bootstrap.Dropdown() 时。
按需的关键不在“删 CSS”，而在“选 Sass 模块”。漏掉 functions 或顺序颠倒，$grid-breakpoints 就不会生效；加了 components 却不用按钮，反而让包体积多出 12KB。这一步没做对，后面所有定制都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
