coreui / coreui/coreui-pro

Unable to override variables using new Sass modules

Open
#561 10 comments 0 reactions 0 assignees View on GitHub

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,
);

Image

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.