我正在使用vue组件(cli .vue)
只有当某个布尔值为true / false时,我才需要显示样式表。 最简单的解释是: myVar == false 时,组件未加载样式。
<style v-if="myVar" lang="scss"> @import 'mystyles.css' </style>
我知道这样做是不可能的,但我能怎样做&#39;类似的&#39;事?
如果用户想要使用默认样式,我需要在vue中加载我的样式,否则我需要阻止它们被加载。
我的组件在页面中不是一次使用多次,但是使用/不使用默认css的条件也需要适用于所有组件,所以这里没问题。
有什么想法吗? 感谢您的帮助或任何想法提前:))
答案 0 :(得分:11)
使用SCSS,您可以将CSS包装在类中,如下所示:
<style lang="scss">
.conditional-class {
@import 'stylesheet.scss';
}
</style>
然后对该类使用Vue类绑定:
<div :class="{ conditional-class: true }">
...
</div>
这样CSS就不会适用,除非该类在该元素上处于活动状态。如果您希望样式应用于整个应用程序,请将该类放在app根元素上。