laravelsassmixinslaravel-mixscss-mixins

Unable to resolve Mixin error "$color: var(--bs-body-bg) is not a color", that has never occurred before

I ran the "npm run production" command as usual. But now I keep getting this error and I can't solve it. I didn't make any changes to assets (css, scss) only in controlers some code modifications. I have searched the threads on the Stack, but none of the solutions work for me.

ERROR in ./platform/core/base/resources/assets/sass/base/themes/blue.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
$color: var(--bs-body-bg) is not a color.
    ╷
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            root stylesheet
    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)
Solution

  • I find the solution. It's a breaking change with Bootstrap CSS 5.3.0 They have removed some sass variables. You need to open file package.json and change: "bootstrap": "^5.2.3", to "bootstrap": "5.2.3",