Conditional stylesheet in .vue component

Question

I'm working with vue component (cli .vue)

I need to have my stylesheet appear only if certain boolean is true/false. Simplest explanation would be something like : When myVar==false, component is not loading styles.

<style v-if="myVar" lang="scss"> @import 'mystyles.css' </style>

I know it is impossible in that way, but how I'm able to do 'similar' thing?

I need to load my styles in vue if user want to use default Styles, if not I need to prevent them from being loaded.

My component is used not once but many times in page, but that condition of using/not using default css need to be apply by all components as well, so no problem here.

Any ideas? Thanks for help or any ideas in advance :)

maxpaj maxpaj · Accepted Answer · 2017-12-19T19:11:19

Using SCSS, you can wrap that CSS in a class, something like this:

<style lang="scss">

.conditional-class {
    @import 'stylesheet.scss';
}

</style>

And then use a Vue class binding for that class:

<div :class="{ conditional-class: true }">
    ...
</div>

This way the CSS won't apply unless the class is active on that element. If you want the styles to apply all over the app, then put that class on the app root element.

Conditional stylesheet in .vue component

1 Answers