在 Vue 组件中继承 CSS答案

【问题标题】：Inherit CSS in Vue components在 Vue 组件中继承 CSS
【发布时间】：2018-11-12 09:40:59
【问题描述】：

我有两个组件，它们在路由器中有一个子组件，如下所示：

{
        path: '/admin',
        component: AdminMain,
        children:[
            {
                path: '/admin',
                component: AdminHome,
                name: 'AdminHome'
            }
        ]
 },
 {
        path: '/',
        component: Home,
        children:[
            {
                path: '/',
                component: Index,
                name: 'Index'
            }
        ]
 }

我想为这些组件做两个单独的布局，以便他们的孩子继承父母的 css。有可能的？目前我在每个组件中加载 css 文件，因为我的 css 文件与 vuetify css 冲突。

【问题讨论】：

我在stackoverflow.com/a/49654061/5599288 中有一个类似问题的答案。也许对你有用。
@JacobGoh 不幸的是，在我的情况下它不起作用。 SCSS 中导入的代码作为新的超出了选择器主体

标签： javascript css vue.js

【解决方案1】：

使用 v-html 创建的 DOM 内容不受作用域样式的影响，但您仍然可以使用深度选择器对其进行样式设置。

Vue 文档的Deep Selectors 页面中的这个措辞听起来自相矛盾。但它的意思是，例如，如果你想对一个 'p' 元素设置范围样式并将这些更改显示在 v-html 中，你的 css 应该如下所示。

>>> p {
/* some css */
}

【讨论】：

【解决方案2】：

你可以deep selectors 来影响子组件的css

AdminMain.vue（父组件）

<style scoped>
.a >>> .b { /* ... */ }
</style>

将被翻译成.a[data-v-f3f3eg9] .b { /* ... */ }

那么 .b 将影响子组件 (AdminHome.vue)

【讨论】：

好的，但我使用引导程序。在这种情况下，我必须在整个文件中添加“>>>”运算符？
使用 3rd 方 css，您可以将其导入 main.js 或 root 组件中。