应按Sass源码路径精确导入：先functions、variables、mixins，再按需引入grid、buttons等模块，禁删reboot和type；避免全量import或PurgeCSS误删，防止样式错乱与编译报错。
直接 import 'bootstrap/dist/css/bootstrap.css' 是最省事的做法，但会把全部 200KB+ 的 CSS 打包进来——哪怕你只用了 btn 和 container，浏览器也得解析所有未使用的规则，拖慢首屏渲染。真正按需引入必须走 Sass 源码路径，跳过全量入口。
为什么不能用 purgecss + bootstrap.min.css？
PurgeCSS 容易误删动态类名，比如 :class="`text-${status}`" 或服务端渲染生成的类；Bootstrap 大量使用 @extend 和嵌套规则，PurgeCSS 无法安全识别依赖链。更关键的是：它治标不治本——你本就不该让这些 CSS 进入构建流程。
必须按 functions → variables → mixins → 模块顺序导入 Sass
顺序错一个，Sass 编译就会报错，比如 SassError: Undefined variable "$grid-columns"。正确顺序是：
@import "bootstrap/scss/functions";@import "bootstrap/scss/variables";@import "bootstrap/scss/mixins";-
@import "bootstrap/scss/grid";（仅当模板中用了row/col） -
@import "bootstrap/scss/buttons";（仅当用了btn类） -
@import "bootstrap/scss/utilities/text";、@import "bootstrap/scss/utilities/spacers";等按需添加
别漏掉 reboot 和 type ——它们重置 HTML 默认样式和基础排版，删了会导致按钮字体异常、列表缩进错乱等隐蔽问题。
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
哪些 Sass 模块可以删？哪些要小心？
判断依据只有一个：你的 Vue 模板里是否真实出现了对应类名，且没被其他样式覆盖。
- 可删（90% 项目适用）：
tooltip、popover、carousel、offcanvas、toast - 谨慎删：
forms—— 表单控件依赖reboot中的border/padding，删前务必检查.form-control渲染是否错乱 - 禁删：
reboot和type
还有一个容易被忽略的坑：Vite 默认支持递归 @import，但某些旧版 postcss-import 配置可能不处理嵌套 @import，导致 grid 里引用的变量找不到；另外，HTML 中不能再留着 CDN 引入的 bootstrap.min.css，常见错误是 Sass 已精简编译了，但 index.html 里还挂着 ，结果样式重复冲突。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
