如何在 useEffect (jsx?) 中使用 sass $ 声明

Question

我在 _variables.scss 文件中设置了不同的样式。喜欢

$secondary: #ffc500;
$tertiary: #ffdd69;
$quartiary: #fffbed;

我想使用不同的正文颜色，所以我想像这样更改不同页面中的正文背景：

        document.body.style.backgroundColor = "red"  });

这很好用，但现在我想使用 $primary 而不是 'red' 我只是无法让它发挥作用。有人有想法吗？

Answer 1

您可以使用 sass :export 关键字将变量从 sass 文件传递到 js 文件：

// colors.scss
$primary: #123456;
:export {
  primary: $primary;
}

// main.js
import colors from './colors.scss'

colors.primary; // '#123456'

据我所知这是一个非标准关键字，它由 webpack + sass-loader 处理，但不是所有 sass 转译器。

How to use a sass $ declaration in useEffect (jsx?)