Unable to override variables using new Sass modules #561
Description
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.