'React and SCSS export a variable from scss to react

i am trying to export a color from my .scss file to my React.

colors.scss 

:root {
  --color2: #606060;
}

$color: #88b5dd;
$color2: var(--color2);

.export {
 color: $color
 color2: $color2
}

and reading it in my React:

App.js

import {Colors} from './colors.scss'
console.log(Colors.color)
console.log(Colors.color2)

and in the console.log i can see:

#88b5dd
var(--color2)

color2 is not a color, the var(--color2) doesn't get interpolated when im using export anyone knows how to fix this issue ? how can i get the color defined in :root? thanks!

cssreactjssass


Solution 1:[1]

Edit: found this library react-css-vars and refactor this code to use it with React

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Gal Shtengel

Related Questions