Reusable component problem

[DarKDinDoN]

Hello,

First of all, thank you for your awesome lib.

I have a problem with components and styles.

Let's assume I have a reusable component with some default styles :

// reusable-component.vue //

// default template
<template>
  <div class="my-reusable-component">
    <a :href="url"></a>
  </div>
</template>

// default script
<script>
export default {
  name: 'ReusableComponent',

  props: { url: String }
}
</script>

// default styles imported
<style src="path/to/some/css/lib/piece/of/styles.css"></style> // <---- import from stylesheet

Now, if I want to use this ReusableComponent in two others components, i can do :

// ComponentA.vue //

<template>
  <div>
    <reusable-component url="http://google.com"></reusable-component>
  </div>
</template>

<script>
import ReusableComponent from 'path/to/reusable-component.vue'

export default {
  name: 'Component A'

  components: { ReusableComponent }
}  
</script>

// ComponentB.vue //

<template>
  <div>
    <reusable-component url="http://bing.com"></reusable-component>
  </div>
</template>

<script>
import ReusableComponent from 'path/to/reusable-component.vue'

export default {
  name: 'Component B'

  components: { ReusableComponent }
}  
</script>

The issue : with the production build, the stylesheet is imported twice.

I know I can import the stylesheet globally in the root App component, but I don't want to. I want my ReusableComponent to be portable to another project with a simple copy/paste. Or at least, if I don't use this component anymore, not to have the piece of css in the production build.

Note : in this case, the styles are not inline in the ReusableComponent vue file because they are extracted from a css framework.