Use SCSS variables amongst files and inject them into other preJSS usages

[Vadorequest]

I wonder if there is a way to use/re-use a set of variables amongst several files.

Currently, my SCSS has a variables.scss which defines global variables.
Is there a way to load that file somehow when using prejss?

I'm migrating a react app (create-react-app) using .scss files to react-jss because I need to customise the theme of the app based on settings, those settings are given on the fly through a window.settings browser local variable.

I first started to use react-jss directly but I find your solution pretty attractive (on top of it), it would allow me to just copy/paste my code inside preJSS template literal, which would be a huge time saver.

I would only need to replace the variables using ${}, but if I can use SASS variables directly then I don't even need to do that, I can just remove my variables.scss and migrate it to preJSS and define my variables based on the given settings, and use SCSS variables ($primary-color, etc.) as I usually do in my other files. This way, I end up updating one file instead of dozens.

And, if I can load the file content inside preJSS directly, I wouldn't even need to update my SCSS file, I could just require them somehow and inject the content in preJSS string literal directly, and would only need to provide my variables. This would be the best way to go, because I'd only have to move my variables from SCSS to preJSS and then inject those in other preJSS usages, instead of moving all my SCSS to react-jss, which is a real pain.

I wonder if that's doable and if that's a good thing. Keeping actual SCSS files feels much easier to maintain, and IDE support is better too. Your thoughts?