Extends in vue.js component to use parent style

Question

I've a third party component that I'm extending - while I want to reuse template and style section, I need to alter the behaviour of it. So, the content of my vue file looks something like this:

<script>
import Foo from 'foo';
export default {
  name: 'Bar',
  extends: Foo
}
</script>

Unfortunately, while template section of Foo is reused in my Bar the same doesn't happen for the style section - I've to copy it in its entirety from Foo otherwise no styles will be applied.

How can I reuse parents style section?

There doesn't seem to be a solution to this now. But there is already a feature request in github.com/vuejs/vue-loader/issues/1003. — Jacob Goh
– Jacob Goh, Commented Aug 3, 2018 at 9:44
Could you not use an imported file rather than an online style? — Marcus
– Marcus, Commented Aug 3, 2018 at 10:35

Marcus · Accepted Answer · 2018-08-03 11:26:02Z

2

When you define a Vue component, you have an optional section, where you can either place inline CSS or import an external file. By default, when creating a component (for the sake of argument call it any-component.vue) I will include the following section:

<style scoped>
    @import ‘./any-component.css’
</style>

The scoped parameter prevents the CSS propagating elsewhere in the DOM, so the styling is only applied to the component itself and does not corrupt other components. But depending on your needs you can remove it.

So this gives you two solutions: there is nothing to stop you either importing a CSS file into the parent without the scoped qualifier; lor, importing the same CSS file into multiple components (when you want a consistent look and feel). With a view to avoiding unintended consequences, I would opt for the latter.

Hope that helps.

answered Aug 3, 2018 at 11:26

Marcus

2,3612 gold badges18 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

eithed Over a year ago

In my instance parent component has an inline style section and it doesn't import an external css file.

RamboNo5 Over a year ago

Unfortunately this solution is contrary to the single file component methodology of Vue.

Marcus Over a year ago

I'm not sure Vue has a particularly strong view on the subject. An app scaffolded with Vue-cli comes prepackaged with the ability to handle CSS modules. And in any event it all depends on the situation.

Collectives™ on Stack Overflow

Extends in vue.js component to use parent style

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related