Error importing bootstrap5.scss file for ej2-Splitbuttons

[Laurin S]

I'm getting the following error when importing the bootstrap5.scss file with the elixir phoenix "dart_sass" library (https://github.com/CargoSense/dart_sass) and building it:

/* Error: $color: var(--bs-link-color) is not a color.

 *     ,

 * 452 |             stroke: fade-out($btn-link-color, $progress-btn-circle-opacity);

 *     |                     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

 *     '

 *   node_modules\@syncfusion\ej2-splitbuttons\styles\progress-button\_theme.scss 452:21   @content

 *   node_modules\@syncfusion\ej2-base\styles\common\_mixin.scss 7:5                       export-module()

 *   node_modules\@syncfusion\ej2-splitbuttons\styles\progress-button\_theme.scss 1:1      @import

 *   node_modules\@syncfusion\ej2-splitbuttons\styles\progress-button\_all.scss 2:9        @import

 *   node_modules\@syncfusion\ej2-splitbuttons\styles\progress-button\bootstrap5.scss 5:9  @import

 *   ej2-splitbuttons\styles\bootstrap5.scss 4:9                                           @import

What can I do or is this an error from your side?

I have the following import procedure in my main scss file:

@import "../node_modules/bootstrap/scss/bootstrap";

@import "../node_modules/@syncfusion/ej2-base/styles/bootstrap5";

@import "../node_modules/@syncfusion/ej2-icons/styles/bootstrap5";

@import "../node_modules/@syncfusion/ej2-buttons/styles/bootstrap5";

@import "../node_modules/@syncfusion/ej2-calendars/styles/bootstrap5";

@import "../node_modules/@syncfusion/ej2-dropdowns/styles/bootstrap5";

@import "../node_modules/@syncfusion/ej2-grids/styles/bootstrap5";

@import "../node_modules/@syncfusion/ej2-inputs/styles/bootstrap5";

@import "../node_modules/@syncfusion/ej2-lists/styles/bootstrap5";

@import "../node_modules/@syncfusion/ej2-navigations/styles/bootstrap5";

@import "../node_modules/@syncfusion/ej2-notifications/styles/bootstrap5";

@import "../node_modules/@syncfusion/ej2-popups/styles/bootstrap5";

@import "../node_modules/@syncfusion/ej2-schedule/styles/bootstrap5";

@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/bootstrap5";

[Keerthikaran Venkatachalam]

Hi Laurin,

We have attempted to replicate the issue on our end but were unable to do so. We have prepared the sample based on your provided code snippet. It is working fine on our end. I have attached the sample for reference.

For further validation, could you please share the issue's replicable working sample or replicate the issue in our sample with replication steps and a video demonstration, and share which package version you are using in your project? Based on that, we will check and provide you with a better solution quickly.

If you are using a lower package version, kindly update the Syncfusion package to the latest version (25.1.35) and check on your end.

Please let us know if you need any further assistance on this.

Regards,

KeerthiKaran K V

Attachment: Sample_5792bbc.zip