[steven-pribilinskiy]

Reasons behind this PR are described in #22891

[andresgalante]

Hi @pribilinskiy thanks for your PR. This is an intresting idea.

I think it adds a layer of unnecessary abstraction and complexity and we end up with the same result, a user would have to choose from the "optional" components anyway.

I rather see a comment on _variables.scss splitting up the settings, files that don't generate code, from the components, that generate code.

It's up to @mdo, but I would pass on this idea.

[XhmikosR]

Yeah, I'd pass on this too.

[steven-pribilinskiy]

It's not an idea, it's a solution to a problem that many could face after switching from LESS to SCSS.

Don't confuse "layers of complexity" with splitting long files (a.k.a spaghetti code).
This solution adds flexibility, provides ability to override variables while reusing (referring to) existing variables that are declared in _variables.scss without the need to copy/paste the whole thing.

In v3 LESS implementation it wasn't an issue to reference an existing variable from variables.less because of lazy variable evaluation. Now in v4, in order to reference an existing variable the _bootstrap.scss must be copied and pasted into project's directory:

// _my-bootstrap.scss
/*
 * Bootstrap v4.0.0-beta.2
 */
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import 'custom-variables';

@import '~bootstrap/scss/mixins';
@import '~bootstrap/scss/root';
@import '~bootstrap/scss/print';
...

Now after every update one will have to compare the _my-bootstrap.scss file with the _bootstrap.scss and apply the differences because optional components could be added/renamed/deprecated/removed.

we end up with the same result, a user would have to choose from the "optional" components anyway.

Wrong.
The user will be able to easily override the variables by including only two files from node_modules:

@import "~bootstrap/scss/bootstrap-required";
@import "custom-variables";
@import "~bootstrap/scss/bootstrap-optional";

In case of a small project, when there's no need to reference existing variables, the user can go with the old way, leveraging the !default feature.

@import "custom-variables";
@import "~bootstrap/scss/bootstrap";

It will be a win-win solution for any kind of projects

Btw, in the Getting started with theming section of the documentation, there's already a clear separation between Required and Optional stylesheets.

[andresgalante]

@pribilinskiy thanks for the clarification. It'll be up to @mdo if he wants to introduce this reorganization.

[mdo]

Thanks, but we'll pass.