Using MDBPro for React, we are trying to change the spacing between columns in the bootstrap grid system.

Within the project (index.js) we are using the following line of code to change/edit SASS files:

import 'bootstrap-css-only/css/bootstrap.min.css';
import './assets/scss/mdb.scss';

Any changes we make to

assets/scss/_custom-*.scsss

files are being reflected in the app when the app recompiles. However when we make the change to

assets/scss/core/bootstrap/_variables.scss

for the variable to reduce the spacing,

$grid-gutter-width: 16px !default;

the change is not reflected and the gutter spacing remains the same. The mdb.scss file imports the core/bootstrap/*.scss files during recompile but yet the change is not reflected. How can we change the gutter spacing?

We also tried overwriting the $grid-gutter-width in the _custom-variables.scss file but that does not work either. Changing mdb component variables does work (i.e. $navbar-scrolling-padding)