importing sass variables from jsx file

Question

I'm working on a React project built with create-react-app. I have a file called common.scss where I keep a list of variables, for example:

$blue: 'blue';
$red: 'red';

The SCSS files are pre-processed with node-sass-chokidar.

I would like to be able to import these variables into my jsx files, but I could not find a clear way of doing this without ejecting. Can you show me a way to do this without eject?

Thanks.

Answer 1

If you use CSS modules, you can import a css file with some variables exported.

$blue: 'blue';
$red: 'red';

:export {
  blue: $blue;
  red: $red;
}

And then use them as js.

import css from 'path/to/your/file.scss'
/*
...
*/
<div style={{color: css.blue}} />