CODEWITHSUNDEEP
angulartwitter-bootstrapsassbootstrap-4angular9
Shofol
Shofol

Reputation: 733

Bootstrap 4 colors are not changing in Angular 9

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 relative 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?

Upvotes: 2

Views: 3204

Answers (2)

deelde
deelde

Reputation: 1591

you should the remove the "node_modules/bootstrap/dist/css/bootstrap.min.css" from the styles-array

      "styles": [
          "src/styles.scss",
          "src/assets/theme/base.scss"
        ],

because you already import the bootstrap sass'version in your base.scss.

Upvotes: 4

Shofol
Shofol

Reputation: 733

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",
],

Upvotes: 0

Related Questions