импорт переменных sass из файла jsx

Question

Я работаю над проектом React, построенным с create-react-app.У меня есть файл с именем common.scss, в котором я храню список переменных, например:

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

Файлы SCSS предварительно обрабатываются с помощью node-sass-chokidar.

. Я хотел быбыть в состоянии импортировать эти переменные в мои файлы JSX, но я не мог найти четкий способ сделать это без извлечения.Можете ли вы показать мне способ сделать это без извлечения?

Спасибо.

Answer 1

Если вы используете CSS-модули , вы можете импортировать файл css с некоторыми экспортированными переменными.

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

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

И затем использовать их как js.

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