Wouldn't that be great?
First, let's create a Sass file with a bunch of variables. Generally it would ideally be the file where we define all our variables related to the project.
= Black, White, Grays =
/*===== End of Black, White, Grays ======*/
Now, to have the exact same thing exported we are going to use Webpack's magic export from the Sass file itself, which looks like this.
import colors from "colors.scss";
console.log(colors.black); // #000000
That's it! Ain't that great?
- You don't need to repeat hex values in both styles and script
- You can choose which variables to expose.
- You don't need a complicated system / process to get the results.
Hope that helps!