Overwrite Bootstrap 4 Sass variables with CSS variables?

Question

I am trying to overwrite default Primary Sass variable in Bootstrap 4 to a custom color using CSS variables in an Angular application, like this:

styles.scss

:root {
  --primary: #00695c;
}

$myPrimary: var(--primary);

$primary: $myPrimary; // This does not work

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

I get this error when compiling my application:

Failed to compile.

./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--15-3!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

undefined
                                         ^
      $color: var(--primary) is not a color.
    ╷
181 │ $link-hover-color:                        darken($link-color, 15%) !default;
    │                                           ^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  node_modules\bootstrap\scss\_variables.scss 181:43  @import
  node_modules\bootstrap\scss\bootstrap.scss 9:9      @import
  stdin 19:9                                          root stylesheet
      in C:\Work\node_modules\bootstrap\scss\_variables.scss (line 181, column 43)

Is there a way to solve this issue and overwrite bootstrap sass variables using css variables?

There is another related question, But I am unable to solve my issue with it.

Update

Actually I've created an Angular component library to be used internally. I have implemented Theming in this library using CSS variables, so I can change their values dynamically and allow the user to select a theme for the application.

So inside my library I have different theme files, Below is one of them:

theme.scss

@import './library-styles-to-be-used-in-app.scss';

:root {
  --primary: #00695c;
  --secondary: #f4f5f6;
}

Now, I import this theme file inside my angular app styles.scss file like this:

@import '../dist/library/styles/theme.scss';
@import '../node_modules/bootstrap/scss/bootstrap';

See the images below bootstrap css variables are already overwritten, but if I use bootstrap class like btn btn-primary it still shows that old blue color.

you can't do that since css properties and sass variables work differently. you can't use the built in sass function darken with a css custom property. It expects a color value and gives you a fix darker color back. css properties don't work this way, they are dynamic and can change. — cloned
– cloned, Commented Mar 2, 2020 at 12:27
@cloned Is there any alternative or any solution for this? I have implemented theming in my application so i need css variables. — Usman Anwar
– Usman Anwar, Commented Mar 2, 2020 at 12:37
@UsmanAnwar - I have exact same situation. Did you got any solution? — Nimmi
– Nimmi, Commented Apr 23, 2020 at 3:54
@Nimmi No, I had to individually override all the required bootstrap classes. If you could find a solution please do share it here. — Usman Anwar
– Usman Anwar, Commented Apr 23, 2020 at 8:51
@UsmanAnwar Thanks for the update, will try and if I will be able to find something then will sure update here. — Nimmi
– Nimmi, Commented Apr 23, 2020 at 15:12

cloned · Accepted Answer · 2020-03-02 13:54:03Z

3

This is not possible since CSS custom properties and SASS variables are two seperate things.

CSS custom properties can change during runtime via Javascript.
SASS variables on the other hand are static, they will be generated and are then hardcoded values in the .css-File. For example, the darken() functionality from SASS takes the input string (for example a hex-value) and outputs a darkened version of this hex-value.

But bootstrap already uses CSS custom properties, so maybe you are just using them in the wrong way. Maybe if you expand what you want to achieve maybe we can help you better.

For now the only answer we can give you is: This is not possible.

answered Mar 2, 2020 at 13:54

cloned

6,9154 gold badges33 silver badges46 bronze badges

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

4 Comments

Usman Anwar Over a year ago

I just updated my question can you please have a look.

cloned Over a year ago

Can you update even more? In your screenshot it shows that your green is used for the variable. Where is this overwritten? How is the value used in the final components?

Usman Anwar Over a year ago

Yes even though the green is used for the variable, still if I use any bootstrap component the same default blue is applied to the bootstrap components, from which I can conclude that bootstrap is not using CSS variables for it's styles. The variable is overwritten in theme.scss file the one in updated question.

cloned Over a year ago

This does not answer my question at all, can't help you if you don't want to give more information.

Dmitry Yaremenko · Accepted Answer · 2020-09-28 07:16:31Z

0

Currently expressions (formulas) in SCSS files won't allow to use this technique.

There is an github issue to move those expressions outside from SCSS styles and allow to set it by separate variables https://github.com/twbs/bootstrap/issues/31538 , e.g. you can see a PR which shows which changes need to have in Bootstrap and how to enable CSS variables mode for alert component https://github.com/twbs/bootstrap/pull/31753

answered Sep 28, 2020 at 7:16

Dmitry Yaremenko

2,59022 silver badges31 bronze badges

Collectives™ on Stack Overflow

Overwrite Bootstrap 4 Sass variables with CSS variables?

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related