Vue.js Scoped CSS - 如何匹配根元素？答案

【问题标题】：Vue.js Scoped CSS - how to match root element?Vue.js Scoped CSS - 如何匹配根元素？
【发布时间】：2020-01-13 21:41:35
【问题描述】：

我有以下组件：

组件 1：

<style scoped>
.root {
    ....
}
</style>

<template>
    <div class="root">
        ...
        <component2></component2>
        ...
    </div>
</template>

组件 2：

<style scoped>
.root {
    ....
}
</style>

<template>
    <div class="root">
        ...
    </div>
</template>

因为组件2的根元素也有类root，所以组件1的根元素的样式也应用到组件2上，如何防止呢？有没有办法只匹配组件的根元素（而不是其子元素），而不需要确保所有根类名称都是唯一的粗略解决方法？

编辑：

相关 GitHub 问题：https://github.com/vuejs/vue-loader/issues/957

目前似乎没有简单的解决方法，重要的解决方法是使用 CSS 模块而不是作用域 CSS。

【问题讨论】：

标签： css vue.js

【解决方案1】：

如果你想为你的组件使用变量，请将所有变量放在 app.vue（父）中，然后使用到你的组件（子）中

【讨论】：