如何覆盖bootstrap 4 angular中的网格变量

Question

how to really override bootstrap variables? I try this one and not working

// overrides.scss
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';

@import 'variables.scss'; // my own variables
$grid-columns: 12;
$grid-gutter-width: 16px;
@import '~bootstrap/scss/bootstrap.scss';

// global styles
@import 'overrides.scss';
@import '~bootstrap/scss/bootstrap.scss';

I'm using Angular 2+ and just want to set the gutter width of row from 30px to 16px, any solution to this?

Answer 1

There's no reason to import Bootstrap twice. Just import it once at the end...

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

$grid-columns: 12;
$grid-gutter-width: 16px;

@import 'bootstrap';

Demo: https://www.codeply.com/go/wSyODZFc0b