I am trying to implement theming support on a Vue.js 2 front-end application, but I'm stuck on it and online results are no help so far.
The catch is, the application runs styiling using SCSS (following Element UI lines), thus having no
':root{}' definition appended on the document (for JS/TS direct tweaking) so all the solutions that use:
:root{ --variable-name: value; }
and then change the root variables within script blocks, basically won't work.
Or at least, they could work, but every single element described in the Element UI node package needs to be overridden accordingly with even some '!important' brute force.
In simpler words, I need a solution that lets me change SCSS variables ('$--variable-name: value') after compilation, I'm starting to think it's not even possible.
Does anyone know where those variables get defined (if there's a place and it's not eventually all hard-casted in the resulting code)?
Is anybody else having similar issues?
I thought theming was a bit simpler but I think I have come across one of the worst possible scenarios for this implementation.
If you can provide other solutions I would be grateful as well!
Help!
I tried overriding the variables definitions or loading different variable files at different times and nothing changed. Also other online solutions, all regarding having a ":root" block. None of them worked for me. Also I tried to use a static file link in the head of the document, to then dynamically address. But in my vue.config.js there is a prepended scss import to allow stand-alone components to access part of those variables (there would be no need of that if there was a way of accessing :root variables, which in this case is not possible).