Correct way to override bootstrap variables

Expected behavior To be able to change bootstrap variables

Actual behavior Not possible

Steps to reproduce Angular.json`

            "styles": [
          "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
          "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
          "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
          "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
          "node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
          "node_modules/angular-bootstrap-md/scss/mdb-free.scss",
          "src/assets/scss/styles.scss"
        ],

style.scss

    $primary: #86b519 !default;
$theme-colors: (
  "primary": #86b519,
  "lightblue": #0191ce,
  "iceblue": #e5f4fa,
  "grey": #757575,
  "header-darkblue": #326295,
  "header-lightblue": #63B0D7,
  "green": #86b519
);
$breadcrumb-bg: white;