What is the right way to override _variables in Bootstrap 4.3.1?

Question

I am using Bootstrap 4.3.1 in my angular 8 project. Basically I want to (change / override) some default variables of bootstrap. Like e.g $font-size-base

I've tried below code but this isn't working at all, please suggest me what is the right way to (customize / change / override) bootstrap scss variables in angular project.

angular.json

"styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/scss/style.scss"
        ],

style.scss

@import "../../node_modules/bootstrap/scss/_functions";
@import "../../node_modules/bootstrap/scss/_variables";
@import "../../node_modules/bootstrap/scss/mixins";
$font-size-base: 0.655rem;

package.json

"@ng-bootstrap/ng-bootstrap": "^5.1.2",
"bootstrap": "^4.3.1",

Still showing default font size while running angular project.

Answer 1

The answer of my question is mentioned in @JB Nizet comment.

I'm posting this answer to show baby steps for upcoming developers, who are willing to know a practical answer of my question.

If you're using Angular 8 with Bootstrap ^4.3.1 then your style node in angular.json file should be like:

"styles": [
   //"node_modules/bootstrap/scss/bootstrap.scss",
   //"node_modules/bootstrap/dist/css/bootstrap.min.css",
   "src/scss/style.scss"
],

and your style.scss be like:

/* You can add global styles to this file, and also import other style files */
$font-size-base: 0.875rem;
@import "../../node_modules/bootstrap/scss/bootstrap";