Laravel中Bootstrap CSS变量未被替换的问题排查

问题场景 #

在Laravel项目中尝试通过自定义Sass变量覆盖Bootstrap默认颜色，执行npm watch或npm run dev编译后，$primary变量未被正常替换。

现有代码 #

app.scss 文件

@import '~bootstrap/scss/bootstrap';
@import "node_modules/font-awesome/scss/font-awesome.scss";

$primary: #625BF6;
$danger: #ff4136;

.btn-primary {
    --bs-btn-bg: $primary;
    --bs-btn-hover-bg: #6b64f5;
    --bs-btn-active-bg: #534bf3;
}

webpack.mix.js 配置

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/css/app.scss', 'public/css');

核心原因 #

1. 变量定义顺序错误：当前是先导入Bootstrap再定义变量，Bootstrap加载时已经使用了自身默认变量，后续定义的$primary只会在当前文件的后续代码中生效，无法覆盖Bootstrap组件的默认样式。
2. Sass依赖缺失或版本不兼容：Laravel Mix编译Sass需要sass和sass-loader依赖，若版本不匹配或未安装，会导致变量编译失败。
3. 缓存干扰：旧的编译缓存可能导致新变量未被替换。

解决方法 #

1. 调整变量定义顺序（关键） #

将自定义变量放在Bootstrap导入之前，让Bootstrap加载时直接使用你的自定义变量：

// 先定义自定义变量
$primary: #625BF6;
$danger: #ff4136;

// 再导入Bootstrap及其他样式
@import '~bootstrap/scss/bootstrap';
@import "node_modules/font-awesome/scss/font-awesome.scss";

// 可选：局部微调组件样式
.btn-primary {
    --bs-btn-hover-bg: #6b64f5;
    --bs-btn-active-bg: #534bf3;
}

调整后，Bootstrap会自动用你的$primary生成所有相关组件的背景色，无需手动设置--bs-btn-bg。

2. 检查并修复Sass依赖 #

执行以下命令确认依赖是否存在：

npm list sass sass-loader

若缺失或版本不兼容，执行：

# 卸载旧依赖
npm uninstall sass sass-loader
# 安装兼容版本（适配Laravel 9+）
npm install sass@^1.60.0 sass-loader@^12.6.0 --save-dev

3. 清理缓存并重新编译 #

删除旧编译文件和缓存，强制重新编译：

rm -rf public/css/app.css node_modules/.cache
npm run dev

内容的提问来源于stack exchange，提问作者YD8877