.vue组件中的条件样式表

Question

我正在使用vue组件(cli .vue)

只有当某个布尔值为true/false时,我才需要显示样式表.最简单的解释是:当myVar == false时,组件不加载样式.

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

我知道这是不可能的,但我怎么能做'类似'的事情？

如果用户想要使用默认样式,我需要在vue中加载我的样式,否则我需要阻止它们被加载.

我的组件在页面中不是一次使用而是多次使用,但是使用/不使用默认css的条件也需要适用于所有组件,因此这里没有问题.

有任何想法吗？感谢您的帮助或任何想法提前:)

Answer 1

如何将CSS包装在类中,如下所示:

<style lang="scss">

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

</style>

然后为该类使用Vue类绑定:

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

这样,除非该类在该元素上处于活动状态,否则CSS将不会应用.如果您希望样式应用于整个应用程序,那么将该类放在app根元素上.