必须重定义 $spacers 变量再导入 Bootstrap，这是唯一安全、可扩展的入口；需按顺序先引入 functions，再重写 $spacers，接着引入 variables，最后引入 bootstrap。
为什么不能直接改 .m-1 的 margin 值
直接写 .m-1 { margin: 0.5rem !important } 看似快，但会破坏整个间距系统的响应式能力。Bootstrap 的 m-sm-1、me-lg-2 等变体类，是靠 Sass 循环读取 $spacers map 自动生成的；硬覆盖基础类，不会同步更新这些断点类，导致中屏上间距突然“回退”到默认值。
更隐蔽的问题是：第三方组件（比如模态框、表单控件）内部依赖 m-2 表达“标准间距”，你一改全局 .m-2，它们的布局就可能错位，且很难定位到根源。
必须重定义 $spacers 变量再导入 Bootstrap
这是唯一安全、可扩展的入口。关键顺序不能错：
-
@import "bootstrap/scss/functions";—— 必须最先引入，提供map-get等基础函数 - 紧接着重写
$spacers，保持 key（0–5）不变，只改 value -
@import "bootstrap/scss/variables";—— 必须在重定义之后，否则你的修改被默认值覆盖 - 最后才是
@import "bootstrap/scss/bootstrap";
示例（单位用 rem）：
立即学习“前端免费学习笔记（深入）”；
$spacers: ( 0: 0, 1: 0.375rem, // = 6px @ 16px root 2: 0.75rem, // = 12px 3: 1.125rem, // = 18px 4: 1.5rem, // = 24px 5: 2.25rem // = 36px );
想加新尺寸（比如 m-6）或新单位（如 em）怎么办
可以，但要同步改两处：
- 扩展
$spacersmap，新增 key（如6: 3rem），否则m-6类根本不会生成 - 确认
bootstrap/scss/utilities/_spacing.scss中的循环逻辑是否包含新 key——默认只遍历 0–5，若需支持 6，得在自定义文件里补一句：@include generate-spacer-utilities(6);（前提是该 mixin 可访问）
用 em 没问题，但要注意：它相对于父元素 font-size，而 rem 相对于根元素，后者更可控。别混用，否则调试时 margin 值会跳变。
生成的 CSS 体积太大，怎么精简
默认 Bootstrap 为每个断点（xs/sm/md/lg/xl/xxl）都生成全量间距类，很容易产出 2KB+ 的无用 CSS。实际项目往往只用到 3 个断点 + 4 个方向（m/p/mt/pt）。
建议做法：
- 删掉不用的断点：在重定义前，先清空
$grid-breakpoints或只保留需要的键，比如(sm: 576px, md: 768px, lg: 992px) - 禁用某些方向：Bootstrap 的
$spacers循环本身不控制方向，但你可以 fork_spacing.scss，把margin-left相关的ms-、me-类注释掉 - 避免嵌套媒体查询：不要在
@each循环里写@media (min-width: #{$breakpoint})，这会让每条规则重复输出 N 遍；应该让 Bootstrap 原生的响应式工具类机制接管
最易被忽略的一点：$spacers 的 key 名称（0–5）只是索引，不是语义。有人想改成 (xs: ..., sm: ...)，结果发现 m-xs-2 根本不生效——因为 Bootstrap 的 spacing 工具类只认数字 key，不认字符串。
