为什么我的Bootstrap自定义主题在打包后失效_检查CSS压缩与提取配置-css教程-PHP中文网

build后自定义变量丢失，根本原因是构建工具未将变量文件注入scss编译上下文，导致bootstrap加载原生variables.scss时未读取覆盖值；必须通过vite.config.js或webpack配置additionaldata显式导入变量文件，且路径需正确解析。

为什么我的bootstrap自定义主题在打包后失效_检查css压缩与提取配置

为什么 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 选项补上这一环，漏配就等于没写变量。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

在 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 掉