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.

In my styles.scss I only import my _variables.scss. My Bootstrap is included in app through angular.json. — Corné
– Corné, Commented Feb 5, 2019 at 18:44

Corné · Accepted Answer · 2019-02-05 19:11:43Z

7

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

answered Feb 5, 2019 at 19:11

Corné

1,4513 gold badges15 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Amos47 · Accepted Answer · 2019-02-05 19:14:36Z

2

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

You will either need to:

use bootstrap-sass

@import './_variables.scss';
@import '~bootstrap-sass/assets/stylesheets/_bootstrap';

compile your own version of bootstrap with your theme and use that minified version.
If you are using bootstrap 4, you can use CSS variables instead

answered Feb 5, 2019 at 19:14

Amos47

7056 silver badges15 bronze badges

Comments

Swapnil Srivastava · Accepted Answer · 2019-02-05 18:43:37Z

0

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;
}

answered Feb 5, 2019 at 18:43

Swapnil Srivastava

1732 silver badges13 bronze badges

1 Comment

Corné Over a year ago

Thanks, I know I can do it like that, but I basically want to override the color of primary. This way, anywhere I use primary this color will apply.

Collectives™ on Stack Overflow

Apply custom Bootstrap variables in Angular project

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related