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, Mar 02 '20 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, Mar 02 '20 at 12:37
@UsmanAnwar - I have exact same situation. Did you got any solution? — Nimmi, Apr 23 '20 at 03: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, Apr 23 '20 at 08:51
@UsmanAnwar Thanks for the update, will try and if I will be able to find something then will sure update here. — Nimmi, Apr 23 '20 at 15:12

score 3 · Answer 1 · answered Mar 02 '20 at 13:54

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 02 '20 at 13:54

cloned

6,346
4
26
38

I just updated my question can you please have a look. – Usman Anwar Mar 02 '20 at 14:39
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? – cloned Mar 02 '20 at 17:36
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. – Usman Anwar Mar 03 '20 at 06:59
This does not answer my question at all, can't help you if you don't want to give more information. – cloned Mar 03 '20 at 07:34

score 0 · Answer 2 · answered Sep 28 '20 at 07:16

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

Overwrite Bootstrap 4 Sass variables with CSS variables?

2 Answers2