In the file test.module.scss, I store all my variables for colors, typography, and more. I want to be able to use these variables in my react components. However, the file starts with :root to define the variables:
:root{
--color-white: #fff;
--color-black: #000;
//...more colors
}
I have tried adding :export in different ways to make the variables accessible in my react component:
:root{
:export{
--color-white: #fff;
--color-black: #000;
//...more colors
}
}
or
:export{
:root{
--color-white: #fff;
--color-black: #000;
//...more colors
}
}
or even:
:root:export{
:root{
--color-white: #fff;
--color-black: #000;
//...more colors
}
}
However, none of these approaches work as expected. The variables are either not accessible from react components or not exportable. Is there a way to properly export these variables without duplicating them at the end of the file?