SassError: division is deprecated Sass 2.0.0, alert component, button component

[innovaweb-dev]

Admin PRO 2 [1.3.0] - 2020-11-11

I have this message when I compile my projet.

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

$spacer / 4,

More info and automated migrator: https://sass-lang.com/d/slash-div

[davidtmiller]

Ah yes I just ran into this today when going through another theme for some updates. We will get this migrated over in the next build. Thanks!

[innovaweb-dev]

Since I have uptade my project, SBAdmin is broken and I can't work. Also this problem, the problem come from Bootstrap or SBAdmin ?

Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: $color: color-contrast(#0061f2) is not a color.

11 │ color: darken($color, 10%);

node_modules/bootstrap/scss/mixins/_alert.scss 11:12 alert-variant() assets/sbadmin/scss/core/components/_alerts.scss 53:9 @import assets/sbadmin/scss/core/styles.scss 52:9 @import assets/sbadmin/scss/styles.scss 9:9 root stylesheet friendly-errors 23:18:46 @ ./assets/sbadmin/scss/styles.scss 4:14-235 15:3-20:5 16:22-243

Can you informe to me, when the problem will be fixed ?

[davidtmiller]

Since I have uptade my project, SBAdmin is broken and I can't work. Also this problem, the problem come from Bootstrap or SBAdmin ?

Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: $color: color-contrast(#0061f2) is not a color. 11 │ color: darken($color, 10%); node_modules/bootstrap/scss/mixins/_alert.scss 11:12 alert-variant() assets/sbadmin/scss/core/components/_alerts.scss 53:9 @import assets/sbadmin/scss/core/styles.scss 52:9 @import assets/sbadmin/scss/styles.scss 9:9 root stylesheet friendly-errors 23:18:46 @ ./assets/sbadmin/scss/styles.scss 4:14-235 15:3-20:5 16:22-243

Can you informe to me, when the problem will be fixed ?

I am not sure where this exists in the project. It currently isn't in the SB Admin Pro product. Can you give me more information on where this error is coming from?

[innovaweb-dev]

I confirm, this is SB Admin Pro 2, version 1.3.0

node_modules/bootstrap/scss/mixins/_alert.scss 11:12 alert-variant() assets/sbadmin/scss/core/components/_alerts.scss 53:9 @import

//assets/sbadmin/scss/core/components/_alerts.scss 53:9
@each $state,
$value in $theme-colors {
    $alert-background: $value;
    $alert-border: $value;
    $alert-color: color-contrast($alert-background);

    .alert-#{$state}.alert-solid {
      @debug $state
        @include alert-variant($alert-background, $alert-border, $alert-color);
/** When I comment the line above, that works again.**/
    }
}

[innovaweb-dev]

When the problem with alert component is bypassed with commentary. I have also problem with button component.

SassError: Only 6 arguments allowed, but 12 were passed. assets/sbadmin/scss/core/components/_buttons.scss

 ERROR  in ./assets/sbadmin/scss/styles.scss                                                                                                                    friendly-errors 08:51:21

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):                                                                                              friendly-errors 08:51:21
SassError: Only 6 arguments allowed, but 12 were passed.
  ┌──> assets/sbadmin/scss/core/components/_buttons.scss
151│ ┌     @include button-variant( // background
152│ │         transparent,
153│ │         // border
154│ │         transparent,
155│ │         // color
156│ │         fade-out($gray-900, 0.5),
157│ │
158│ │         // hover background
159│ │         fade-out($gray-900, 0.9),
160│ │         // hover border
161│ │         transparent,
162│ │         // hover color
163│ │         fade-out($gray-900, 0.5),
164│ │
165│ │         // active background
166│ │         fade-out($gray-900, 0.8),
167│ │         // active border
168│ │         transparent,
169│ │         // active color
170│ │         fade-out($gray-900, 0.5),
171│ │
172│ │         // disabled background
173│ │         fade-out($gray-900, 0.9),
174│ │         // disabled border
175│ │         transparent,
176│ │         // disabled color
177│ │         fade-out($gray-900, 0.65),
178│ │
179│ │     );
  │ └─────^ invocation
  ╵
  ┌──> node_modules/bootstrap/scss/mixins/_buttons.scss
6 │   @mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active
-border: darken($border, 12.5%)) {
  │          ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ declaration
  ╵
  assets/sbadmin/scss/core/components/_buttons.scss 151:5  button-variant()
  assets/sbadmin/scss/core/components/_buttons.scss 151:5  @import
  assets/sbadmin/scss/core/styles.scss 54:9                @import
  assets/sbadmin/scss/styles.scss 9:9                      root stylesheet
                                                                                                                                                                friendly-errors 08:51:21
 @ ./assets/sbadmin/scss/styles.scss 4:14-235 15:3-20:5 16:22-243
 @ ./.nuxt/@adm/App.js
 @ ./.nuxt/@adm/index.js
 @ ./.nuxt/@adm/client.js
 @ multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%
2Fclient&name=client ./.nuxt/@adm/client.js

[davidtmiller]

These backwards compatibility issues are with the Bootstrap framework and aren't an issue with the theme itself. If you're using dart-sass version 1.33.0 or later, the division operation won't be supported. Currently, Bootstrap is on 1.32.0, and they haven't rolled out any changes to account for these errors. Once Bootstrap updates their SCSS variables and mixins to account for the changes coming to SASS, we will update our themes accordingly. For the time being, it looks like whatever build you have running is using the newer version of SASS, which is causing these errors to appear. Have you tried reverting back to SASS 1.32.x on your project to fix this issue?

[innovaweb-dev]

Finally, I have bought SBAdmin PRO for Bootstrap 5 this afternoon. Thanks,