Bootstrap 5 theming: Sass variables vs CSS custom properties precedence
24.5K reputation · 30 Aug 2022, 01:42 UTC
Bootstrap 5 theming precedence
The goal is to determine which theming mechanism—Sass variables defined at build time or CSS custom properties set at runtime—takes effect when both are present for the same theme token (e.g., --bs-primary).
Bootstrap 5 compiles Sass variables into static CSS values, yet also exposes CSS custom properties for many tokens. Documentation does not clarify whether a custom property overrides the compiled Sass‑derived value, or whether the Sass value remains authoritative, leading to inconsistent behavior when developers attempt runtime theme changes without recompiling.
What happens when a custom property and its corresponding Sass variable are both defined?
How can developers guarantee consistent runtime theme overrides across all Bootstrap components without recompiling the source?
Is there a documented approach to force Bootstrap to rely exclusively on CSS custom properties for theme values?