How To Apply Vue.js Scoped Styles To Components Loaded Via View-router?
Solution 1:
This is probably what you want https://vue-loader.vuejs.org/en/features/scoped-css.html#deep-selectors
Since your code snippet specifically uses SCSS you'll have to use the /deep/ combinator.
If you want a selector in scoped styles to be "deep", i.e. affecting child components, you can use the >>> combinator:
<stylescoped>.a >>> .b { /* ... */ }
</style>The above will be compiled into:
.a[data-v-f3f3eg9].b { /* ... */ }
Some pre-processors, such as SASS, may not be able to parse >>> properly. In those cases you can use the /deep/ combinator instead - it's an alias for >>> and works exactly the same.
So you'd end up with:
<stylelang="scss"scoped>#admin {
some-property: some-style;
/deep/ .actions {
some-property: some-style;
}
}
</style>Solution 2:
You can put styles in a separate file and reference it from all components that need it:
<stylesrc="path/to/your/styles"lang="scss"scoped></style>Solution 3:
The reason why router-view tag wont pass styles to its child is because the router-view itself is not a style-able html tag, therefore you cant apply any styles to it. You can try but it wont render.
Reason: The router-view is essentially a template tag, or placeholder for Vue to anchor to and insert the component or View that gets called for that route. As a result, the router-view tag wont appear in the compiled markup, you will only see the View or Component thats being loaded.
It sort of works the same way as the App Entry point works for the Vue App into the index.html file. At least that's my experience and knowledge.
Also, @Antonio Trapani good answer, I would add that you can even go as far as having a scss file with all your global styles, or styles needed across multiple components, then just @import the styles into the App.vue that will give you access across the whole app. Also, IME.
Hope this helps some. Cheers.
Post a Comment for "How To Apply Vue.js Scoped Styles To Components Loaded Via View-router?"