How to change max-width container scss?

Question

Bootstrap

The project is built via webpack and boostrap has been installed as an npm package in node modules.
I found in the documentation that default variables can be changed using $container-max-widths. But that doesn't happen.

index.scss:

@import "~normalize.css";

@import "~bootstrap";

$container-max-widths: (
        sm: 540px,
        md: 720px,
        lg: 960px,
        xl: 1170px
);

Why doesn't it work like this, because changes in bundle.css are added after bootstrap is imported?
Or maybe you can't redefine the dimensions as I want and you have to do it through the bootstrap/scss/_variables.scss file.
Can this be done in index.scss?

Answer 1

Variables must be declared before connecting the main styles.