Bootstrap how to import my customized variables and not horribly increase compilation time?

Question

I want to override bootstrap's variables and then use them in my scss files. I use webpack, sass, css-, sass-, miniCssExtract- loaders and bootstrap. I have two files:

1. index.scss

@import '~bootstrap/scss/functions';

$primary: #8706f0;
$secondary: #141b41;
$light: #e6e5e8;

@import '~bootstrap/scss/bootstrap';

html,
body,
#root {
  height: 100%;
}

body {
  background-color: $primary;
}

2. login.module.scss

@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';

.login {
  background: $primary;
}

In file 1 variables are overwritten. In file 2 I have default bootstrap variables. Compilation time is fine. If I change file 2 to:

@import 'index';

.login {
  background: $primary;
}

Everything works as it should, variables are overwritten. But the compilation time raises from <1s to 4-5 seconds and I think it's because bootstrap.scss is compiled second time (first in index, then here in login).

I'd like to know what's the best way to have my variables accessible in other files and have a decent compilation time at once. I know I can create another file with my own variables like "_variables.scss" and import this, but I would much prefer to have everything in bootstrap.

Or is there any way to tell webpack to not compile whole bootstrap again? Idk I'm struggling with it to find the best approach and none of them satisfies me...

Answer 1

Ok I found a way to do it. I'm leaving an answer if someone will ever get there. So to put this all together you should:

1. create _variables.scss with your overwrites:

@import '~bootstrap/scss/_functions.scss';

$primary: #8706f0;
$secondary: #141b41;
$light: #e6e5e8;

@import '~bootstrap/scss/_variables.scss';

2. create _custom.scss (smth like bootstrap setup file):

@import './variables.scss';
@import '~bootstrap/scss/bootstrap.scss';

3. create index.scss and import it at the root of the app (this is the only one time webpack will compile whole bootstrap):

@import 'assets/scss/_custom.scss';

//...

4. login.module.scss - and you can get access to your overwritten variables and the rest of bs vars too, do it like that:

@import 'assets/scss/_variables.scss';

.login {
  background: $primary;
  height: 100%;
  width: 100%;
}

Compilation time is fine now and you have your own variables. I think there are other ways of achieving that, but why not to share own thoughts :D

And instead of importing whole bootstrap at _custom, you can import only neccessary modules of course.