从jsx文件导入sass变量

Question

我正在开发一个使用create-react-app构建的React项目。我有一个名为common.scss的文件，其中包含变量列表，例如：

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

SCSS文件已使用node-sass-chokidar进行预处理。

我希望能够将这些变量导入到我的jsx文件中，但是我无法找到一种清晰的方法来执行此操作而不会弹出。你能告诉我一种没有弹出的方法吗？

感谢。

Answer 1

如果您使用CSS modules，则可以导入包含某些变量的css文件。

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

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

然后将它们用作js。

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