React webpack

时间:2018-06-13 05:57:11

标签: css reactjs webpack sass

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

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

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

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

.element{ color: red; }

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

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

1 个答案:

答案 0 :(得分:0)

您可以改为使用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

详细了解CSS variables
https://www.w3schools.com/css/css3_variables.asp