直接 vite build 报错因 Vite 不识别 ~ 别名且不自动解析 Bootstrap 的 SCSS 依赖链，需配置 resolve.alias、安装 sass、复制字体到 public 并正确导入 CSS/JS。
为什么直接 vite build 会报错找不到 Bootstrap 的 CSS 或 JS？
因为 vite 默认不处理 bootstrap 这类依赖中的 dist/css/bootstrap.css 或 dist/js/bootstrap.bundle.js 的路径映射，尤其当项目里用 @import "~bootstrap/scss/bootstrap" 或 import 'bootstrap' 时，vite 不识别 ~ 别名，也不自动解析 node_modules/bootstrap/scss 下的依赖链（比如 _functions.scss 依赖 _variables.scss）。
常见错误现象：Failed to resolve import "bootstrap/scss/bootstrap"、Cannot find module 'bootstrap'、CSS 中字体或图标路径 404。
- 必须显式配置
resolve.alias，把~bootstrap指向node_modules/bootstrap - SCSS 全量导入需确保
sass已安装（npm add -D sass），否则编译中断 - 若用 JS 功能（如
new Modal(...)），要确认是否引入了bootstrap.bundle.js（含 Popper），而非仅bootstrap.js
如何在 vite.config.ts 中正确配置 Bootstrap 路径与样式处理？
核心是两件事：让 SCSS 找得到 Bootstrap 源文件，让 JS 能正常解析并加载其模块导出。不是加个 import 就完事。
- 添加
resolve.alias：{ '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap') } - 在
css.preprocessorOptions.sass.additionalData中注入变量（如自定义$primary），避免每个 SCSS 文件重复@use - 禁用
optimizeDeps.exclude中的bootstrap（默认已排除，但显式写上更稳）——否则 HMR 下 JS 初始化可能失效 - 如果用了图标字体（Bootstrap 5.3 之前），要手动复制
node_modules/bootstrap/dist/fonts/到public/，否则构建后字体 404
import 'bootstrap' 和 import 'bootstrap/dist/js/bootstrap.bundle.min.js' 有什么区别？
前者走的是 Bootstrap 的 ESM 入口（package.json#exports），后者是预构建的 UMD 包。Vite 环境下推荐前者，但必须确保你的 tsconfig.json 或 vite.config.ts 没强制关闭 resolve.exports。
-
import 'bootstrap'→ 触发 tree-shaking 可能性更高，但依赖完整popperjs/core安装，且要求你手动初始化组件（如Modal.getOrCreateInstance） -
import 'bootstrap/dist/js/bootstrap.bundle.min.js'→ 直接挂载全局bootstrap对象，适合快速验证，但无法被 Vite 优化，且和define插件冲突（如process.env.NODE_ENV替换失败） - 二者都**不会自动执行 CSS**，必须单独
import 'bootstrap/dist/css/bootstrap.min.css'或 SCSS 全量导入
构建后 CSS 中的 url(./fonts/...) 为啥 404？
Vite 的 build.assetsInlineLimit 默认是 4096 字节，小于该值的字体文件会被转成 base64；大于则输出为独立文件。而 Bootstrap 的字体文件（如 bootstrap-icons.woff2）通常超限，又没配 publicDir 映射，导致路径错乱。
- 最稳做法：把
node_modules/bootstrap/dist/fonts/整个目录复制到项目public/fonts/，然后用 SCSS 变量覆盖$bootstrap-icons-font-src - 或者改写 CSS 中的
url()：通过build.rollupOptions.plugins加replace插件（如replace({ values: { 'url(./fonts/': 'url(/fonts/' }） - 别依赖
assetsDir配置去“统一管理”，Bootstrap 的 CSS 是硬编码路径，Vite 不会重写它
~ 别名或漏掉 public/fonts 复制，上线后才发现按钮没圆角、模态框点不开、图标全变方块。
