求助：无法解析Mixin错误“$color: var(--bs-body-bg) is not a color”

开发者阿泽

2026-7-19

问题描述

执行npm run production命令时持续报错，未修改任何assets（css、scss）文件，仅调整了控制器代码，查阅相关帖子后现有解决方案均无效。

错误日志

ERROR in ./platform/core/base/resources/assets/sass/base/themes/blue.scss
模块构建失败（来自 ./node_modules/mini-css-extract-plugin/dist/loader.js）：
ModuleBuildError: 模块构建失败（来自 ./node_modules/sass-loader/dist/cjs.js）：
$color: var(--bs-body-bg) 不是一个颜色值。
    ╷
523 │ $popover-title-bg: darken($popover-bg, 3%) !default;
    │                    ^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  platform\core\base\resources\assets\sass\base\bootstrap\_variables.scss 523:20  @import
  platform\core\base\resources\assets\sass\base\global\_variables.scss 8:9        @import
  platform\core\base\resources\assets\sass\base\_base.scss 2:9                    @import
  platform\core\base\resources\assets\sass\base\themes\blue.scss 106:9            根样式表
    at processResult (E:\xampp\htdocs\Laravel_app\node_modules\webpack\lib\NormalModule.js:764:19)
    at E:\xampp\htdocs\Laravel_app\node_modules\webpack\lib\NormalModule.js:866:5
    at E:\xampp\htdocs\Laravel_app\node_modules\loader-runner\lib\LoaderRunner.js:400:11
    at E:\xampp\htdocs\Laravel_app\node_modules\loader-runner\lib\LoaderRunner.js:252:18
    at context.callback (E:\xampp\htdocs\Laravel_app\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
    at Object.loader (E:\xampp\htdocs\Laravel_app\node_modules\sass-loader\dist\index.js:63:5)

解决方案

修复变量类型冲突：错误核心是$popover-bg被赋值为CSS自定义属性var(--bs-body-bg)，但Sass的darken()函数只能解析具体颜色值（如十六进制、RGBA格式），无法识别CSS变量。需将$popover-bg替换为Sass可处理的静态颜色值。

覆盖Bootstrap变量：在项目自定义Sass文件中，提前重定义$popover-bg，示例代码：

// 需在引入Bootstrap变量文件前导入此自定义配置
$popover-bg: #f8f9fa !default;
@import "../base/bootstrap/_variables";

清理依赖与缓存：执行npm ci重新安装锁定版本的依赖，删除node_modules/.cache目录清除webpack缓存，再重新执行npm run production。
检查依赖兼容性：确认sass-loader、sass（或node-sass）与项目中Bootstrap版本是否匹配，部分版本组合会导致变量解析异常，可尝试降级或升级对应依赖包。
排查控制器间接影响：虽然仅修改了控制器，但部分框架可能通过控制器输出动态样式配置，检查控制器中是否有修改前端主题变量的逻辑，若有则调整为静态颜色值。

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