Unable to override variables using new Sass modules
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 19
- Forks
- 18
- Avg merge
- 1h 6m
- Merged PRs (30d)
- 549
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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the failure with sass-embedded 1.89.2, Vite 6.3.5, and CoreUI Pro 5.14.2 using the shown app.scss, variables, and @use configuration. Inspect how the CoreUI Sass module exposes configurable variables and compare it with the previous @import setup. Done means the documented module setup compiles and the listed variable overrides take effect.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, sass, vite
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100