How to customize bootstrap variables ?

I use material theme and use some components from Angular material.
But angular material has some style conflicts with bootstrap (especially with reboot.css).
More about this problems is here: https://www.amadousall.com/the-good-parts-of-bootstrap-4-you-are-missing-in-your-angular-material-projects/

So I need to change some styles by customizing bootstrap sass-variables.

I add customized variable in @theme/styles/styles.scss:

```css
$label-margin-bottom: 0;
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
@import '~bootstrap/scss/grid';
```

But this doesn't work. Style still is:
```css
label {
margin-bottom: 0.5rem;
}
```

And is applied from scss/_reboot.scss and variable ```$label-margin-bottom``` have not been overriden:
```css
label {
// Allow labels to use `margin` for spacing.
display: inline-block;
margin-bottom: $label-margin-bottom;
}
```

How could I customize bootstrap variables properly ?

p.s. I also tried place my variable after '~bootstrap/scss/variables' import but result was the same.