Unable to override variables using new Sass modules

[IP-Developer]

Versions:

"sass-embedded": "^1.89.2",
"vite": "^6.3.5",
"@coreui/coreui-pro": "^5.14.2"

Following the tutorial on https://coreui.io/bootstrap/docs/customize/sass/ I've migrated from @import to @use statements when including CoreUI Pro in my application.
Unfortunately it results in the error seen on the screenshot below.
The content of the file (that is @imported in my app.scss) that includes CoreUI Pro:

@use '@coreui/coreui-pro/scss/coreui' with (
    // Options
    $enable-deprecation-messages: false,

    $enable-dark-mode: false,
    $enable-shadows: true,
    $enable-gradients: false,
    $enable-rounded: true,

    // Typography
    $font-family-sans-serif: "'Poppins', sans-serif",

    // Colors
    $blue: #26ace2,
    $red: #e1001e,

    $primary: #26ace2,
    $danger: #e1001e,

    $primary-bg-subtle: #e9f7fc,

    // Body
    $body-bg: white,
    $body-color: #212326,

    // Accordion
    $accordion-button-bg: #e9f7fc,
    $accordion-button-active-bg: #e9f7fc,

    // Spinner
    $spinner-vertical-align: -.3em,

    // Buttons
    $btn-hover-color: white,
);

P.S. The previous setup was like this:

// CoreUI variables override
@import 'variables';

// Include CoreUI
@import '@coreui/coreui-pro/scss/coreui';

This file was later included in app.scss. After updating to @core/coreui-pro v5.14.0 it is failing, since the decision to migrate.

[mrholek]

If you use @coreui/coreui-pro, then you don't have to use @coreui/coreui.

[IP-Developer]

If you use @coreui/coreui-pro, then you don't have to use @coreui/coreui.

Not sure I'm following you here. Mind to elaborate?

[mrholek]

Could you please show me your complete styles file?

[IP-Developer]

@mrholek
app.scss:

@import 'legacy';
@import 'coreui';
@import 'vue-loading-overlay/dist/vue-loading.css';
@import 'custom';

coreui/_index.scss:

@use '@coreui/coreui-pro/scss/coreui' with (
    // Options
    $enable-deprecation-messages: false,

    $enable-dark-mode: false,
    $enable-shadows: true,
    $enable-gradients: false,
    $enable-rounded: true,

    // Typography
    $font-family-sans-serif: "'Poppins', sans-serif",

    // Colors
    $blue: #26ace2,
    $red: #e1001e,

    $primary: #26ace2,
    $danger: #e1001e,

    $primary-bg-subtle: #e9f7fc,

    // Body
    $body-bg: white,
    $body-color: #212326,

    // Accordion
    $accordion-button-bg: #e9f7fc,
    $accordion-button-active-bg: #e9f7fc,

    // Spinner
    $spinner-vertical-align: -.3em,

    // Buttons
    $btn-hover-color: white,
);

_legacy.scss and _custom.scss are just importing some CSS files.

[mrholek]

Do you import CoreUI in legacy.scss or custom.scss?

[IP-Developer]

@mrholek no.
_legacy.scss

@import '../css/base.css';
@import '../css/frontend.css';
@import '../css/frontend.v2.css';
@import '../css/content.css';
@import '../css/jquery-ui.css';
@import '../css/chosen.css';
@import '../css/custom.css';

_custom.scss

.ra-question-textarea
{
    width: 100%;
    white-space: pre-wrap;
    word-break: break-word;
}

.hover-gray:hover
{
    background-color: #ebedef;
}

.p-30
{
    padding: 30px;
}

.w-55
{
    width: 55%;
}

.w-550
{
    width: 550px;
}

.bg-danger-overwrite
{
    --cui-bg-opacity: 1;
    background: rgba(var(--cui-danger-rgb), var(--cui-bg-opacity)) !important;
}

.readOnly
{
    background-color: #e0e0e0 !important;
}

.ml_list li
{
    list-style: circle !important;
}

.membersNav ul.disabled
{
    position: relative;

    &:before
    {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1;
        content: "";
        opacity: 0;
    }

    & li.active-menu a
    {
        cursor: pointer !important;
        opacity: 1;
        z-index: 10;
    }

    & li:not(.active-menu) a
    {
        cursor: default;
        opacity: 0.6;
    }
}
.modalTab{
    width: 1090px !important;
}

.memberLink{
    color: white !important;
    font-size: 24px !important;
    text-decoration: underline white !important;
}
.memberLink:hover{
    color: #009dd9 !important;
    text-decoration: underline black !important;
}
.col62{
    width: 62%;
}

.acc-group {
    height: 27px;
    background-color: rgb(34 151 39);
    padding: 5px 25px 1px 11px;
    font-size: 4px;
    position: relative;
    cursor: pointer;
    border: 2px solid #000000ad;
}

.acc-group::before,
.acc-group::after {
    content: "";
    position: absolute;
    top: 50%;
    background-color: #fff;
    transition: all 0.3s;
}

.acc-group p {
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
}

.acc-group.current-section{
    border: 3px solid #000000ad;
}

.acc-group.empty_groups{
    background-color: white;
    p{
        color: black;
    }
}

.z-index-2000 {
    z-index: 2000;
}

.break-words {
    overflow-wrap: break-word;
}

.cursor-pointer
{
    cursor: pointer !important;
}

.link_color
{
    color: #009DD9;
    cursor: pointer;
}

[mrholek]

Please try to change @import to @forward. Do you have any style imports in vite.config. js?

[IP-Developer]

@mrholek switching to @forward did not solve the issue.

Do you have any style imports in vite.config.js?

Do you mean any other? Yes, there was one which I commented out.

laravel({
            input:
            [
                //client
                'resources/js/app.js',
                'resources/scss/app.scss',

                //admin
                /*'resources/admin/js/app.js',
                'resources/admin/scss/app.scss',*/
            ],
            refresh: true,
        })

[IP-Developer]

@mrholek any updates on this?

[IP-Developer]

Bump