Apply custom Bootstrap variables in Angular project

Question

I am trying to override the default colors of Bootstrap in my Angular project. I have created a _variables.scss file inside of my src folder.

Inside of this file I have added the following code: $primary: purple;

Then I have imported my _variables.scss file into my main styles.scss like this: @import 'variables';

I have also arranged my angular.json file so that my styles look like this:

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

What I would like to achieve is that when i use the following code in my html:

<button type="submit" class="btn btn-primary auth-button">Sign in</button>

the color of my button should be purple.

I want to change more variables later on and on a few pages, thus this should be a global variable.

Answer 1

I have managed to solve it by removing Bootstrap from where I add it to my styles in angular.json and importing it manually in my styles.scss.

I have also changed my Bootstrap path in order to target the scss file. Here is my html code:

@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap.scss';

and here is my styles in angular.json:

"styles": [
              "src/styles.scss"
            ],