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

Question

我的Vue项目使用Vue.Router。

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

像一击：

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”仅适用于父组件(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 文件太大了，要为它的 Vue 组件拆分 css 非常困难。

如何解决？

Answer 1

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

尝试从style 标记中删除scope。