Bootstram theming error when setting colors from css to scss file

Question

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