How to customize bootstrap variables ?

[ramax495]

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:

$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:

label {
    margin-bottom: 0.5rem;
}

And is applied from scss/_reboot.scss and variable $label-margin-bottom have not been overriden:

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.

[SuzGori]

@ramax495 sorry. i don't understand. but, There may be hints below https://akveo.github.io/nebular/docs/design-system/create-custom-theme#create-custom-theme

[ramax495]

but, There may be hints below https://akveo.github.io/nebular/docs/design-system/create-custom-theme#create-custom-theme

No. My problem is with customizing sass-variables from bootstrap, which are used in reboot.scss.

[xavics]

Remove from angular.json the line that imports the prebuild bootstrap.css "styles": [ "node_modules/bootstrap/dist/css/bootstrap.css", ... ] And import it all into styles.scss @import "~bootstrap/scss/bootstrap";