Support overriding component variables via @use + with(...)

[mrholek]

Hi @mdo 👋

First of all, thank you for all the work on v6-dev; it looks really promising. I write here because the conversation in PR has been locked and limited to collaborators.

I have a question/suggestion about how variables are exposed in scss/bootstrap.scss, and how consumers can override them.

What I noticed

In bootstrap.scss, the components and utility styles are included directly (via @use) rather than being re-exported through an entry-point that could allow variable overriding by the consumer via with(...). For example, the structure is roughly:

// bootstrap.scss
...
@use "alert";
...

This approach means consumers cannot override component variables (like padding, color, etc.) at the moment of @use 'bootstrap' with (…); because bootstrap.scss doesn't @forward those component variables.

Why @forward might be useful

Using @forward in bootstrap.scss allows users to override defaults, e.g.:

@use "bootstrap" with (
  $alert-margin-bottom: 3rem,
  $alert-link-font-weight: 800
);

[mcortezv]

Yes, that’s correct. Right now, because bootstrap.scss @uses components directly without @forward, consumers cannot override component-level SCSS variables when importing Bootstrap.

Using @forward in bootstrap.scss would allow this pattern:

@use "bootstrap" with (
  $alert-margin-bottom: 3rem,
  $alert-link-font-weight: 800
);

This would make it much easier for users to customize component defaults at import time, rather than having to override variables separately before each component @use. Essentially, @forward acts as a proper public API for SCSS variables.