CODEWITHSUNDEEP
angularsassbootstrap-4
Corné
Corné

Reputation: 1413

Apply custom Bootstrap variables in Angular project

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.

Upvotes: 2

Views: 3172

Answers (3)

Amos47
Amos47

Reputation: 695

You are trying to use bootstrap-sass features, but using the minified css.

You will either need to:

  1. use bootstrap-sass

    @import './_variables.scss';
@import '~bootstrap-sass/assets/stylesheets/_bootstrap';
  2. compile your own version of bootstrap with your theme and use that minified version.
  3. If you are using bootstrap 4, you can use CSS variables instead

Upvotes: 2

Corn&#233;
Corn&#233;

Reputation: 1413

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

Upvotes: 7

Swapnil Srivastava
Swapnil Srivastava

Reputation: 173

you can change it with the class btn-primary of bootstrap in your styles.scss while importing your variables at the top using import of _variables.scss

.btn-primary {
   color: $primary;
}

Upvotes: 0

Related Questions