CODEWITHSUNDEEP
vue.jsscopestylescomponents
JYL
JYL

Reputation: 203

How to apply css style only for specific Vue component and its child?

my Vue project use Vue.Router.

i want to apply css style for child components from parent. but, i defined css style in parent, it is not applied in child components. and my stylesheet use same class or id selector.

like blow:

list-one.css

.foo bar {
    width: 120px;
}

not-related-for-list-one.css

.foo bar {
    width: 200px;
}

two example css file use seperate different Vue components(ListOne.vue, NotForListOne.vue)

in parent(Vue components, ListOne.vue), i define css style several ways, like below:

  1. <style src="my/css/file/path/list-one.css" scope>
  2. <script>import "my/css/file/path/list-one.css"</script>
  3. <style scope>my css style here</style>

'1' is applied only parent component(ListOne.vue).

'2' is applied global(list-one.css and not-related-for-list- one.css both applied ListOne.vue) because NotForListOne.vue has <script>import "my/css/file/path/not-related-for-list-one.css"</script>.

'3' is same '1'.

ListOne.vue

<child-one></child-one>
<child-two></child-two>
<and-other-childs></and-other-childs>

list-one.css

/* it for ListOne.vue only */
.foo bar {
    width: 120px;
}


/* it for chile-one only */
.foo1 bar {
    display: none;
}

/* it for chile-two only */
.foo2 bar {
    color: red;
}

.
.
.

I think most better ways is this:

ListOne.vue

....

<style>
.foo bar {
    width: 120px;
}
</style>

ChildOne.vue

<style>
.foo1 bar {
    display: none;
}
</style>

ChildTwo.vue

<style>
.foo2 bar {
    color: red;
}
</style>

but css file is so big, it is so hard to split css for its Vue components.

how to solve this?

Upvotes: 0

Views: 5798

Answers (1)

jabamataro
jabamataro

Reputation: 1232

<style scope>my css style here</style>

try to remove the scope from style tag.

Upvotes: 2

Related Questions