I want to configure Bootstrap 4's Sass files with my own variables and then be able to import all Bootstrap's configured members in other sass files (and using WebPack :export{} magic).
I'd usually go with declaring my variables and then throwing a @import "~bootstrap/scss/bootstrap" in it like:
$primary: #eee;
$body-color: $primary;
@import "~bootstrap/scss/bootstrap";
:export{ primary: $primary; body-color: $body-color;}
but as Sass doc mentions:
The Sass team discourages the continued use of the @import rule. Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely. Prefer the @use rule instead.
@use with ():
With @use variables marked as !default are overridable by adding with ($variable: value) but you have to write the @use directive on top of your file (prior declaring any variable that you could configure it with). Best I could go with it would be:
@use "~bootstrap/scss/bootstrap" with (primary: #eee, body-color: #eee);
:export{ primary: bootstrap.$primary; body-color: bootstrap.$body-color;}
Pretty straightforward but I can't share values between configured variables and Bootstrap's members aren't exported from the file! (instead of declaring #eee for multiple variables I'd like them to share a variable holding this value).
meta.load-css($url, $with):
Another approach would be to use the sass' meta mixin meta.load-css that permits you to load and configure a module without being restricted to do it atop of the file. (And being able to declare variables prior to it) but this come at the expense of NOT loading any loaded module's member:
This doesn’t make any members from the loaded module available in the current module.
with mixins
Sass' documentation mentions the use of mixins to configure an imported module more thoroughly, I couldn't really understand how I could achieve that by reading their example, maybe that would be a working solution?
Question:
SO, how could I configure Bootstrap Sass files with shared overriding variables (in the load configuration, exported from the module and export through Webpack)? Is that even possible?