1

I have two components that they have a childs in router like this: 

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

I want to do two separate layout for these components so their childs inherit parents css. It is possible ? At the moment I load css file in every component with scoped because my css file conflict with vuetify css.

Adam Galiński
  • 21
  • 1
  • 4
  • I had an answer for a similar question in https://stackoverflow.com/a/49654061/5599288 . Maybe it will be useful to you. – Jacob Goh Jun 02 '18 at 16:11
  • @JacobGoh Unfortunately in my case it not working. Imported code in SCSS is out of te selector body as new – Adam Galiński Jun 03 '18 at 08:07

2 Answers2

2

DOM content created with v-html are not affected by scoped styles, but you can still style them using deep selectors.

This wording in the Deep Selectors page of the Vue docs sounds like it contradicts itself. But it's saying, for instance, if you want to scope-style a 'p' element and have those changes show up in a v-html, your css should look like this.

>>> p {
/* some css */
}
Evan Jones
  • 43
  • 7
0

You can you deep selectors to affect css of child component

AdminMain.vue (parent component)

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

will be translate to .a[data-v-f3f3eg9] .b { /* ... */ }

then .b will effect children component (AdminHome.vue)

ittus
  • 21,730
  • 5
  • 57
  • 57