Question

如果有人问过这个问题，或者是否有更好的方法来实现我的目标，我会道歉 - 我对这个问题非常新。

在我的React项目中使用.scss我有一个变量，它在许多视觉元素中用作亮点，例如：

$theme = red; .element{ color: $theme; }

我希望用户能够在app客户端中自定义它以满足他们的口味，但是它会被sass-loader / style-loader编译成类似的东西：

.element{ color: red; }

这将要求我手动维护一个元素类列表，以便在事后进行样式编辑。

我希望这里的某个人知道实现我所追求的目标的实用方法，或者，如果不存在，可以帮助我修改sass-loader以便吐出一个类名列表其中变量用于我可以在后编译时加载的文件。

Answer 1

您可以改为使用CSS variable。

声明变量：

:root {
    --theme-color: red; 
}

...然后使用它......

#div1 {
    background-color: var(--theme-color); 
}

#div2 {
    background-color: var(--theme-color);
}

注意：它不适用于Internet Explorer
https://caniuse.com/#search=css%20variables