reactjs - 从 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}} />