Menu
I'm trying to enable different theming options for my app that users can choose from.
I know that I could switch out a class on the <body> tag, but that would make the CSS far messier than just using two different .scss files with different variable values.
Any ideas?
421
I can't think of an elegant way to do this. If you're using single file components (SFCs) you can make use of CSS modules. From the vue-loader documentation ..
You can have more than one
<style>tags in a single*.vuecomponent. To avoid injected styles to overwrite each other, you can customize the name of the injected computed property by giving the module attribute a value
<style module="a">
/* identifiers injected as a */
</style>
<style module="b">
/* identifiers injected as b */
</style>
So you might have a style tag for your common styling, and other style tags for theme specific styling. You can then decide which module/style-tag a class is picked from with a computed property that uses your logic to return the module's name.
90
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
