Vue-multiselect: Is there any way to prevent multiselect styles from loading?

[wujekbogdan]

I want to write styles from scratch, I need a very customized design and I don't want to overwrite the default styles with my own styles. Is there any way to disable the default stylesheet completely?

[shentao]

My guess would be to extend the Multiselect:

<template>
// custom multiselect template
</template>

<script>
import Multiselect from 'vue-multiselect'

export default {
  extends: Multiselect,
  // your custom logic here
}
</script>

<style>
// your custom styles here
</style>

This would require creating a new template that you will be styling. You could copy/paste the template from Multiselect.vue file.
Also, you might try not providing a template at all, just the styles. This might result in overriding just the styles, not the template. But that’s just a guess. Let me know if that helps! :)

[wujekbogdan]

Thanks for the response. I've already tried this solution before posting on Github. It doesn't prevent default styles from loading. Even if you extend the component and provide a custom template and CSS then original styles are still injected into the page.

This way I can only override the original styles (I can do the same without extending the component), but the original styles are still loaded.

But it seems that it has nothing to do with the vue-multiselect component, it's a vue.js core issue, or even a vue-loader/vuify issue.

Here's an answer from a vue.js core team member: https://forum.vuejs.org/t/is-there-any-way-to-prevent-3rd-party-components-styles-from-loading/4918

[shentao]

I will talk with Linus or someone other from the core team to find a solution. Thanks! :)

[sqal]

I'm also looking for some easy solution for this problem. Currently i have to override styles with !important tag which I dislike very much I think the best solution would be if you guys would drop .vue component in favour of plain js file and render function and styles provided in separate file (.css, .scss with $variables) then the customization will be much more easier :)

[shentao]

For SSR functionality I’m working on separating the styles from the component so that you have to import them yourself. This should solve all problems regarding using custom styles.

[shentao]

@sqal @wujekbogdan beta.14 released and should fix this problem. Sorry you had to wait so long :(
Please read: https://github.com/monterail/vue-multiselect/blob/2.0/README.md
Breaking change regarding the styles.