必须在js入口文件顶部import bootstrap css，否则vite无法解析node_modules路径、重写url()或处理scss变量；link引入会绕过构建系统，导致字体丢失、变量失效和样式覆盖。
Bootstrap CSS文件被Vite跳过处理
直接在index.html里用<link href="node_modules/bootstrap/dist/css/bootstrap.min.css">引入，Vite构建时根本不会解析这个路径——它只处理JS中import的资源。结果就是CSS原样复制进dist，但里面所有url()（比如字体、图标）仍按node_modules/相对结构找，而实际文件早被挪走或没复制。
正确做法只有一条：必须在JS入口文件顶部import 'bootstrap/dist/css/bootstrap.min.css'。这样Vite才能接管整个加载链，把CSS提取、重写url()、哈希化一并做完。
- 别在
public/index.html里硬写<link>，那等于绕过构建系统 - 如果用了SCSS版本（
bootstrap/scss/bootstrap.scss），确保已安装sass，否则Vite会静默退化成纯CSS处理，SCSS变量全失效 - 检查
node_modules/bootstrap下是否存在dist/css/目录——某些pnpm安装可能因硬链接隔离导致路径不可达，加shamefully-hoist=true到.npmrc可缓解
SCSS自定义变量未注入编译上下文
你在src/styles/variables.scss里写了$primary: #e74c3c，但打包后按钮还是默认蓝色——不是变量写错了，是Vite压根没把它塞进Bootstrap SCSS的编译流程里。
Vite默认不把任何SCSS文件“全局注入”，每个@import都是独立上下文。你@import "bootstrap/scss/bootstrap.scss"时，它加载的是原始variables.scss，你的覆盖值根本没出现。
- 必须在
vite.config.js里配css.preprocessorOptions.sass.additionalData，内容为@import "./src/styles/variables.scss"; -
variables.scss只能有变量声明，不能含@import或样式规则，否则编译报错 - 入口SCSS文件（如
main.scss）里不要再@import "variables.scss"，否则重复注入引发冲突
CSS内部url()路径未被重写
Bootstrap的CSS里有url("../fonts/glyphicons-halflings-regular.woff")，开发时能加载，是因为文件还在node_modules原位置；打包后CSS被提取到dist/assets/style.xxxx.css，而字体文件根本没进dist，../fonts/就指向了错误层级。
Vite只重写JS中import进来的资源路径，对第三方CSS里的url()默认放行——除非你显式让它介入。
- 最稳解法：在JS里
importBootstrap CSS，而不是HTML link，这样Vite CSS插件才会扫描并重写url() - 若必须用SCSS源码，确认
additionalData配置生效后，再检查dist里是否真生成了对应字体文件（通常在dist/assets/下） - 别指望
base配置能修好url()——base只管HTML里<script></script>和<link>的前缀，对CSS内部路径完全无效
加载顺序导致样式被覆盖
本地看着正常，打包后.btn-primary颜色又变回默认蓝——大概率是CSS注入顺序乱了。Vite打包时可能把自定义样式chunk提前，而Bootstrap CSS chunk延后，结果自定义规则先加载，Bootstrap后加载，同选择器下后者覆盖前者。
这不是权重问题，是层叠顺序问题。浏览器按CSS资源加载完成时间决定谁赢。
- 确保
import 'bootstrap/dist/css/bootstrap.min.css'出现在所有自定义样式import之前 - 避免在
<style></style>标签里写覆盖规则，它默认插入末尾，天然晚于外部CSS - 用CSS变量覆盖更安全：
:root { --bs-btn-bg: #e74c3c; }，Bootstrap 5+所有按钮状态都会同步响应，且不依赖加载时机
真正容易被忽略的是：CSS文件自身的url()路径和HTML中<link href>路径毫无关系，它们各自解析基准完全不同。一个改base，另一个动additionalData，混在一起调只会越调越乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
