build后自定义变量丢失，根本原因是构建工具未将变量文件注入SCSS编译上下文，导致Bootstrap加载原生variables.scss时未读取覆盖值；必须通过vite.config.js或webpack配置additionalData显式导入变量文件，且路径需正确解析。
为什么 build 后自定义变量全丢了？
不是变量写错了，而是构建工具把 bootstrap/scss/bootstrap.scss 编译时跳过了你声明的 $primary 等覆盖逻辑——它压根没看到你改的值。SCSS 文件必须被完整 import，且变量声明必须在所有 Bootstrap 原生 @import 语句之前，否则会被原值覆盖。
- 常见错误现象：本地
npm run serve看起来正常，build 后按钮还是默认蓝色，$primary: #e74c3c完全没生效 - 根本原因：Vite 或 Webpack 没把你的变量文件注入到每个 SCSS 编译上下文里，导致
bootstrap/scss/variables.scss加载时还用的是原始值 - 使用场景：你用了
bootstrap/scss/bootstrap.scss入口，并手动覆盖了$body-bg、$font-size-base等变量
Vite 项目中如何确保自定义变量生效？
Vite 不会自动把全局变量塞进每个 .scss 文件里，必须显式配置 css.preprocessorOptions.sass.additionalData，否则 import 链一断，变量就失效。
- 在
vite.config.js中添加：css: { preprocessorOptions: { sass: { additionalData: `@import "./src/styles/variables.scss";` } } } -
variables.scss必须只包含变量声明（如$primary: #9b59b6;），不能含@import或样式规则 - 入口文件（如
main.scss）里不要再@import "variables.scss"，否则重复注入可能引发编译警告或冲突 - 确认
sass已安装：npm install -D sass；不装sass的话，Vite 会静默回退到 CSS 处理，SCSS 根本不编译
Webpack 项目里 SCSS 变量失效怎么办？
Webpack 默认不支持全局 SCSS 变量注入，靠 sass-loader 的 additionalData 选项补上这一环，漏配就等于没写变量。
- 在
vue.config.js或webpack.config.js的css.loaderOptions.sass下配置：additionalData: `@import "@/styles/variables.scss";`
- 路径必须是 Webpack 能解析的（比如用
@/别名），不能写相对路径如../styles/variables.scss，否则编译报错 - 确保已安装
sass和sass-loader，版本需匹配：sass-loader@12对应sass@1.5+，新版sass-loader@14+要求sass@1.7+ - 如果用了
MiniCssExtractPlugin提取 CSS，变量失效往往是因为它和sass-loader配置没对齐——检查 loader 链是否完整经过sass-loader
CSS 提取后样式变乱，是压缩惹的祸？
不是压缩本身出错，而是压缩器（如 css-minimizer-webpack-plugin 或 Vite 内置的 esbuild）删掉了你依赖的空格、注释或选择器分组逻辑，间接导致某些 utility 类（如 .d-none、.text-truncate）被误判为冗余而剔除。
立即学习“前端免费学习笔记（深入）”；
- 排查方式：临时关闭 CSS 压缩，在
vite.config.js加build.cssMinify: false；Webpack 中注释掉MiniCssExtractPlugin或css-minimizer-webpack-plugin - 若关闭后样式恢复，说明是压缩策略太激进；可调整
css-minimizer-webpack-plugin的minimizerOptions，禁用discardComments或设level: { 1: { specialComments: false } } - 更稳妥的做法：在
variables.scss末尾加一行/* purgecss start ignore */，并在所有你确定要保留的 utility 类附近加对应注释块，防止被 PurgeCSS 类工具误删 - 注意：Bootstrap 5 的
utilities/_api.scss不会自动输出 CSS，它只是配置生成规则；你必须确保bootstrap/scss/utilities.scss被 import，且未被 tree-shaking 掉
实际打包时最容易被忽略的一点：变量文件路径在 additionalData 里写错，或用了未被别名解析的相对路径——构建工具找不到它，就当什么都没发生，连 warning 都不抛。
