.vue组件中的条件样式表 [英] Conditional stylesheet in .vue component

问题描述

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

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

仅当某些布尔值为true/false时，我才需要显示样式表.最简单的解释是:当 myVar == false 时，组件未加载样式.

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?

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

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.

我的组件在页面中使用过一次，但没有多次使用，但是使用/不使用默认CSS的条件也必须适用于所有组件，因此在这里没有问题.

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 :)

推荐答案

使用SCSS，您可以将该CSS封装在一个类中，如下所示:

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

<style lang="scss">

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

</style>

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

And then use a Vue class binding for that class:

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

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

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.

这篇关于.vue组件中的条件样式表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！