从JSX文件导入Sass变量

Question

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

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

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

我希望能够将这些变量导入到我的jsx文件中，但我没有找到一种清晰的方法可以在不弹出的情况下实现这一点。您能否向我展示一种不弹出的方法来实现这一点？

谢谢。

- Mister_L

Answer 1

如果您使用CSS模块，则可以导入一个带有一些导出变量的css文件。

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

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

然后将它们用作 JavaScript。

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

- llobet

---

这并不是一件简单的事情，至少对于我的项目来说不是，使用相同的预处理器。 - vonGohren

编译时，请确保已启用 CSS 模块。 - llobet