With Vue, how would I load different CSS files depending on some logic / data?

user_484358 0
Viewed 1605

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?

vue.js sass javascript
2 Answers

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 *.vue component. 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.

user_103416140

Can't think of any Vue-Specific approach, but in plain Javascript

const styleEl = document.createElement("style");
styleEl.innerHTML = "@import 'alternate.stylesheet.css'";
document.head.appendChild(this.styleEl);

(Obviously, you'd load the normal stylesheet by default, and the alternate stylesheet would need to completely override any rules in the normal stylesheet that were not desired.)

user_14037140
Related