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

Question

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?

score 4 · Accepted Answer · answered Nov 14 '18 at 00:33

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.

score 1 · Answer 2 · answered Nov 14 '18 at 00:55

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.)

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

2 Answers2