如何仅为特定的Vue组件及其子组件应用css样式？

Question

我的Vue项目使用Vue.Router。

我想为父组件中的子组件应用css样式。但是，我在父级中定义了css样式，它不适用于子组件。我的样式表使用相同的类或id选择器。

喜欢打击：

列表one.css

.foo bar {
    width: 120px;
}

不相关的换列表one.css

.foo bar {
    width: 200px;
}

两个示例css文件使用单独的不同Vue组件（qazxsw poi，qazxsw poi）

在父（Vue组件，ListOne.vue）中，我用几种方式定义css样式，如下所示：

1. NotForListOne.vue
2. ListOne.vue
3. <style src="my/css/file/path/list-one.css" scope>

'1'仅适用于父组件（<script>import "my/css/file/path/list-one.css"</script>）。

'2'应用于全球（<style scope>my css style here</style>和ListOne.vue都应用list-one.css），因为

not-related-for-list-
  one.css

有ListOne.vue。

'3'与'1'相同。

ListOne.vue

NotForListOne.vue

列表one.css

<script>import "my/css/file/path/not-related-for-list-one.css"</script>

我认为最好的方法是：

ListOne.vue

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

ChildOne.vue

/* 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;
}

.
.
.

ChildTwo.vue

....

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

但是css文件太大了，为它的Vue组件拆分css是如此困难。

怎么解决这个？

Answer 1

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

尝试从

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

标签中删除<style scope>my css style here</style>。