Bootstrap 4 colors are not changing in Angular

#1

I have made a custom scss file ( modified-bootstrap.scss ) to override bootstrap variables

$theme-colors: (
  "primary": #84329b,
  "secondary": #02bceb
);
@import "node_modules/bootstrap/scss/bootstrap.scss"; // tried related path too

Then imported it in a file named base.scss which is added in angular.json . Here is the base.scss file-

@import "./helpers";
@import "./custom";
@import "./modified-bootstrap";

And, here is my angular.json file’s scss schematics, styles and scripts array-

      "styles": [
          "src/styles.scss",
          "src/assets/theme/base.scss",
          "node_modules/bootstrap/dist/css/bootstrap.min.css"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.slim.min.js",
          "node_modules/popper.js/dist/umd/popper.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]
        ...
        ...
        "schematics": {
        "@schematics/angular:component": {
        "styleext": "scss"
       }
     }

Bootstrap is working fine but the colors are not getting overrode. Any idea what am I doing wrong?

#2

I got the issue of what was causing the problem. This is the order in styles array of angular.json . My base.scss file was listed before the bootstrap.min.css which I think overriding my changes. Changing the order solved the problem. The list should be like this-

"styles": [
    "src/styles.scss",
    "node_modules/bootstrap/dist/css/bootstrap.min.css"
    "src/assets/theme/base.scss",
],
#3