I'm attempting to customize the default Primary Sass variable in Bootstrap 4 with a custom color using CSS variables within an Angular application. Here is what I have tried:
styles.scss
:root {
--primary: #00695c;
}
$myPrimary: var(--primary);
$primary: $myPrimary; // This does not work
@import '../node_modules/bootstrap/scss/bootstrap';
Unfortunately, this approach results in an error during compilation:
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 solution to effectively overwrite bootstrap sass variables using css variables?
While researching, I came across another related question, but it did not resolve my specific issue.
Update
In fact, I've developed an Angular component library for internal use. Within this library, I've integrated Theming using CSS variables, enabling dynamic value changes and theme selection by users.
As part of this setup, I have distinct theme files inside the library. Here's an example of one such file:
theme.scss
@import './library-styles-to-be-used-in-app.scss';
:root {
--primary: #00695c;
--secondary: #f4f5f6;
}
Subsequently, I import this theme file into my angular app's styles.scss as shown below:
@import '../dist/library/styles/theme.scss';
@import '../node_modules/bootstrap/scss/bootstrap';
The screenshots illustrate that bootstrap css variables have been successfully overridden. However, when utilizing a bootstrap class like btn btn-primary, the old blue color persists.