I have a scenario that I am getting color combination in hash values from the database by calling API and then storing it in localStorage for using it afterward. Is there any solution or way around getting the data from the localStorage and then using it as scss variable? I have seen implementation with --variable but I want to use $variable in the scss sheet. I tried to import js file and used jsImportor() in the webpack's sass-loader configuration. The JS file is imported successfully but I can't get localStorage in the JS file.
My JS file
let color = "#e26d26";
module.exports = {
facebook: "#3b5998",
twitter: "#1da1f2",
default: color,
white: "#fff"
}
My Scss File
@import './js-file.js';
$facebook: #3b5998;
$twitter: #1da1f2;
$default: $default;
$white: #fff;
You can assign --variable to $variable in scss file. styles.scss and styles.css
:root {
--theme-color: #4460ac;
}
$theme-color: var(--theme-color);
And than update that color using api call directly. App.js
//Api call
axios.get(url).then(res => {
document.documentElement.style.setProperty(
"--theme-color",
res.data.Result.ThemeColor
);
}).catch(error=>{
document.documentElement.style.setProperty(
"--theme-color",
"#4460ac"
)
})