.vue 组件中的条件样式表

Question

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

只有当某个布尔值是真/假时，我才需要显示我的样式表。 最简单的解释是这样的： myVar==false 时，组件不加载样式。

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

我知道那样做是不可能的，但是我怎么能做“类似”的事情呢？

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

我的组件在页面中使用不是一次而是多次，但是使用/不使用默认css的条件也需要所有组件都应用，所以这里没有问题。

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

Answer 1

使用 SCSS，您可以将 CSS 包装在一个类中，如下所示：

<style lang="scss">

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

</style>

然后对该类使用 Vue 类绑定：

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

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