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）

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

<style src="my/css/file/path/list-one.css" scope>
<script>import "my/css/file/path/list-one.css"</script>
<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>

尝试从scope标记中删除style。

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

1 个答案: