Как применить стиль CSS только для определенного компонента Vue и его дочернего элемента?

Question

Мой Vue проект использует Vue.Router .

Я хочу применить стиль CSS для дочерних компонентов от родителя.но я определил стиль css в parent, он не применяется в дочерних компонентах .и моя таблица стилей использует тот же селектор класса или идентификатора.

как удар:

list-one.css

.foo bar {
    width: 120px;
}

not-related-for-list-one.css

.foo bar {
    width: 200px;
}

в двух примерах использования css-файла отдельные компоненты Vue (ListOne.vue, NotForListOne.vue)

в родительском (компоненты Vue, ListOne.vue), я определяю стиль css несколькими способами, как показано ниже:

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применяется только родительский компонент (ListOne.vue).

'2' применяется глобально (list-one.css и not-related-for-list- one.css оба применяются ListOne.vue), потому что NotForListOne.vue имеет <script>import "my/css/file/path/not-related-for-list-one.css"</script>.

'3' - это то же самое '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;
}

.
.
.

Я думаю, что самые лучшие способы это:

ListOne.vue

....

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

ChildOne.vue

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

ChildTwo.vue

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

но файл CSS настолько велик, что трудно разделить CSS для его компонентов Vue.

как решить эту проблему?

Answer 1

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

попробуйте удалить тег scope из style.