Bootstrap theming error when setting colors from css to scss file

[erkanisuf]

Hello i am getting error while i am trying to inject variables from .css to .scss .
Reason why i am doing this is because javascript(React) changes the colors in .css and then these css variables are used in scss. It works as it should but not when i try to modify bootstrap of version 5 colors with css variables it throws errors. (using normal colors , non-variables for bootstrap works ).

Code looks like this:

The CSS file:injectors.css

 --primary: #757575;
--secondary: #757575;
--success: #757575;
--info: #757575;
--warning: #757575;
--danger: #757575;
--light: #757575;
--dark: #757575;

The variables.scss

 //Fonts
$mainfont: var(--fontFamily);
$lighterFont: var(--lighterFont);


//Colors
$grey: var(--greyColor);

//Bootstrap theming
$primary: var(--primary);
$secondary: var(--secondary);
$success: var(--success);
$info: var(--info);
$warning: var(--warning);
$danger: var(--danger);
$light: var(--light);
$dark: var(--dark);

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "injectors.css";
@import "bootstrap/scss/bootstrap.scss";

And the error message is this one:

    Compiled with problems:X

ERROR in ./src/common/styles/authPage.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/common/styles/authPage.scss)

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $color: var(--primary) is not a color.
   ╷
37 │   @return red($value), green($value), blue($value);
   │           ^^^^^^^^^^^
   ╵
  node_modules/bootstrap/scss/_functions.scss 37:11  to-rgb()
  node_modules/bootstrap/scss/_functions.scss 61:36  map-loop()
  node_modules/bootstrap/scss/_variables.scss 94:20  @import
  src/common/styles/variables.scss 30:9              @import
  src/common/styles/authPage.scss 1:9                root stylesheet

[mdo]

Main issue here is that we expect hex values in our theme colors because we use Sass functions to manipulate them through mixins and more. You cannot do that with CSS variables. So until maybe v6, you'll have to use raw hex values instead.

[varun-av]

Hi, do we have a proposed timeline for the release of v6?

[julien-deramond]

Not yet, we're still working on v5.3.x versions for the moment to fix some issues, and enhance the documentation for the colors mode. We planned to have v5.4.x to integrate some tiny features. Then we'll start the v6.

[varun-av]

Thank you for the update! Looking forward to future releases!