根本原因是sass编译流程未启动或未处理目标文件；需显式指定输入输出路径（如sass src/main.scss dist/main.css），检查@import顺序、变量覆盖时机、}后非法字符、webpackimporter配置及栅格变量同步。
根本原因不是代码没改，而是 Sass 编译流程压根没跑起来，或者跑了但没处理你改的文件。
编译命令没指定输入输出路径
Sass CLI 默认不自动发现和编译整个目录，sass main.scss 这种写法会直接报错 No output path specified，CSS 文件根本不会生成。
- 必须显式写全路径：
sass src/main.scss dist/main.css - 监听模式也要带冒号：
sass --watch src/main.scss:dist/main.css - 如果用
@import "bootstrap/scss/bootstrap"，确保src/main.scss是唯一入口，且所有变量覆盖、@import顺序都正确
变量覆盖时机错误导致修改被忽略
Bootstrap 的 $grid-breakpoints、$primary 等变量带 !default，只在首次加载时生效。一旦 functions 或 variables 被导入，再赋值就无效。
- 错误写法：
@import "bootstrap/scss/variables"; $primary: red;→ 变量已被读取，赋值丢弃 - 正确顺序：先写
$primary: red;，再@import "bootstrap/scss/bootstrap"; - 如果用了自定义
_custom.scss，它必须在bootstrap导入链之前，且不能依赖bootstrap的函数（如color()）
SCSS 文件本身存在语法错误，编译静默失败
报错 SassError: Invalid CSS after "}" 很常见，但它往往不指向真实出错行——Sass 解析器在某个 } 后看到意外字符（比如逗号、空格、Tab），就直接中断，后续所有样式都不会产出。
- 全局搜索
}，挨个检查每个}后是否紧跟着,、换行或空格（尤其 Vue 单文件组件的<style lang="scss"></style>块末尾） - VS Code 开启「显示空白字符」（
Ctrl+Shift+P→Toggle Render Whitespace）查隐藏符号 - AI 生成的嵌套写法（如
.btn { &--large { } , }）极易多出逗号，务必人工核对
构建工具未识别 node_modules 中的 Bootstrap SCSS
Webpack + sass-loader 下，@import "~bootstrap/scss/bootstrap" 不是万能的——~ 前缀需要 webpackImporter: true 显式开启，否则退化为原生 Sass 解析，直接报 Can't resolve。
- 检查
sass-loader配置中是否写了options: { webpackImporter: true } - 更稳妥的方式是配
includePaths：includePaths: [path.resolve(__dirname, 'node_modules')]，然后写@import "bootstrap/scss/bootstrap" - Vite 用户注意：
~完全不生效，必须用css.preprocessorOptions.sass.additionalData或 alias 映射到node_modules
最容易被忽略的一点：改了 $grid-breakpoints 却没同步 $container-max-widths，浏览器里容器宽度卡在旧值，而栅格类（如 col-md-6）看似“没更新”，其实是编译成功了，只是布局表现异常——这种问题不会报错，但会让你反复怀疑编译是否生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
