Q:

v-if on style block

Is it possible to use v-if on style block, like so?
<style lang="scss" v-if="pinkTheme">
.ac-textfield 
{
    background: hotpink;
}
</style>

I tried this and it's not working (the v-if directive is ignored). I know that I could do this:
<div class="ac-textfield" v-style="{ background: pinkTheme ? 'hotpink' : false }"></div>

However, this will quickly become difficult to maintain if I want to modulate more than one style using the value of pinkTheme. Right now, I'm using CSS selectors to achieve the desired effect:
<template>
    <div class="ac-textfield" :class="{ pinkTheme }">
    </div>
</template>

<style lang="scss">
.ac-textfield
{
    //...
}

.ac-textfield.pink-theme
{
    background: hotpink;
}
</style>

However, I don't like this solution very much (I want to achieve greater separation between my themes, and I want the browser to only have to load one theme at a time). Is there any way to make something like the first code block work?

A:

That cannot work as scss must be compiled to css - and this is done at build-time. v-if, though, is executed/interpreted at run-time only.
What would kind of work, is to include the style block in the template part of your single file vue component, but note that you can only use CSS, not SCSS, in there. That has the obvious downside of getting rendered alongside each of the component instances.
Your approach of using conditional CSS classes actually is the correct approach, so you should definitely stick to that.

