SCSS :root section with :export

Question

I have test.module.scss file where I store all my variables for colors, typography etc. I would like to be able to use it in react component. The problem is that file has :root on the top to be able to define variables, it looks like this:

:root{
  --color-white: #fff;
  --color-black: #000;
  //...rest colors
}

and I would like to be able to use :export here to use those colors in my react component. How do add it here so it doesn't brake the code? I tried:

:root{
  :export{
     --color-white: #fff;
     --color-black: #000;
     //...rest colors
  }
}

or

 :export{
      :root{
         --color-white: #fff;
         --color-black: #000;
         //...rest colors
      }
    }

or even:

:root:export{
    :root{
       --color-white: #fff;
       --color-black: #000;
       //...rest colors
     }
}

or some other cases like :root + :export etc. But nothing works as expected, variables are not accessible from react components or they are not exportable. What is the way of exporting it? I know I can add :export in the end of scss file and put again all variables there but they will be doubled and it is not a way that I want to use.