scss自定义断点类名不生成的根本原因是$grid-breakpoints未在bootstrap编译前生效，必须将变量重定义置于@import "bootstrap/scss/functions"之后、@import "bootstrap/scss/variables"之前，并确保键名、顺序、单位严格一致；新增断点需配对使用make-col-ready()和make-col()；js应读取css变量而非硬编码像素值；组件级断点变量（如$navbar-breakpoint）也需提前重定义。
SCSS中自定义断点类名不生成？变量重定义顺序错了
根本原因不是 mixin 写得不对，而是 $grid-breakpoints 没在 Bootstrap 编译前生效。你改了变量但放在 @import "bootstrap/scss/mixins" 后面，等于白写——所有 .col-md-6、.d-lg-none 这类类名，都在 @import 阶段静态生成完毕了。
必须新建一个入口 SCSS 文件（如 src/scss/theme.scss），且严格按以下顺序：
-
@import "bootstrap/scss/functions";—— 必须最先，否则map-get()报错 -
$grid-breakpoints: (xs: 0, sm: 576px, md: 820px, lg: 1024px, xl: 1440px, xxl: 1920px);—— 键名一个不能少，单位 px 不能漏 -
$container-max-widths: (xs: 100%, sm: 540px, md: 780px, lg: 960px, xl: 1380px, xxl: 1860px);—— 键名/顺序/单位必须和$grid-breakpoints完全一致 -
@import "bootstrap/scss/variables";—— 必须在你的变量赋值之后，否则会被!default覆盖 -
@import "bootstrap/scss/bootstrap";—— 最后导入主文件
新增断点（如 xxl）但 .col-xxl-4 不生效？漏调了 make-col-ready
只写 @include media-breakpoint-up(xxl) { .col-xxl-4 { @include make-col(4); } } 是不够的。Bootstrap 的列行为依赖两个 mixin 协同工作：前者重置 padding 和 box-sizing，后者设置 flex 和 width。漏掉 make-col-ready，会导致内边距残留（默认 15px），卡片“突然右移”或列宽错位就是典型表现。
正确写法必须配对且顺序固定：
@include media-breakpoint-up(xxl) {
.col-xxl-4 {
@include make-col-ready(); // 必须在前
@include make-col(4);
}
}
注意：make-col-ready() 会覆盖父级继承的 padding，如果反着写，padding 就被 make-col() 的后续声明覆盖掉。
JS 里用 matchMedia 判断断点总是不准？别硬编码像素值
window.matchMedia("(min-width: 768px)").matches 在页面刚加载时可能返回 false，哪怕视口宽度早已超过 768px；更麻烦的是，如果你已把 md 断点改成 820px，而 JS 还在比 768px，逻辑就彻底脱节。
解决方案是让 SCSS 把断点导出为 CSS 变量，JS 统一读取：
::root {
--breakpoint-md: #{map-get($grid-breakpoints, md)};
--breakpoint-xl: #{map-get($grid-breakpoints, xl)};
}
JS 中这样读：
const mdBreakpoint = getComputedStyle(document.documentElement)
.getPropertyValue('--breakpoint-md')
.trim(); // 返回 "820px"
const isMdUp = window.innerWidth >= parseInt(mdBreakpoint);
这个值稳定、可维护，且不受缩放、CSS 加载时机影响。
嵌套媒体查询导致样式散乱难维护？别靠嵌套猜上下文
在 .card 里写 @media (max-width: 768px) { .title { ... } }，编译后变成 @media (max-width: 768px) { .card .title { ... } }。问题在于：相同断点下的样式分散在几十个组件里，无法统一调整，也容易因选择器权重叠加被意外覆盖。
改用抽象的 @mixin 聚合断点逻辑：
@mixin media-md-down {
@media (max-width: #{map-get($grid-breakpoints, md)} - 1px) {
@content;
}
}
.card {
@include media-md-down {
padding: 12px;
}
}
好处是：所有「md 及以下」的样式集中管理；修改 $grid-breakpoints 后，所有 @include 自动同步；避免重复书写 767px 这类魔法数字。
最易被忽略的一点：$navbar-breakpoint、$offcanvas-breakpoint 这些组件级断点变量，也得在 @import "bootstrap/scss/variables" 前显式重写，否则导航栏还是在 992px 折叠，跟你新设的 lg: 1024px 完全无关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
