Переменные scss в React Webpack

Question

Извиняюсь, если этот вопрос был задан или если есть гораздо лучший способ достичь моей цели - я очень новичок в этом вопросе.

Использование .scss в моем проекте React У меня есть переменная, котораяиспользуется в качестве визуального элемента в нескольких визуальных элементах, например:

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

Я бы хотел, чтобы пользователь мог настроить его в соответствии со своими вкусами в клиенте приложения,однако 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

Подробнее о CSS variables
https://www.w3schools.com/css/css3_variables.asp