How to apply Vue.js scoped styles to components loaded via view-router?

v-deep
vuejs style scoped not working
vue style scoped
vue style not working
css
vue scoped css child component
vue-css modules
stylus scoped

How can I apply Vue.js scoped styles to components loaded via <view-router>.

Here is my code:

<template>
  <div id="admin">
    <router-view></router-view>
  </div>
</template>

<style lang="scss" scoped>
#admin {
  .actions {
    display: none;
    span {
      cursor: pointer;
    }
  }
}
</style>

When I visit the /posts a component named Posts will be loaded, inside this component I have a

<div class="actions">
  some content
</div>

The problem is that the style defined in #admin is not applied to .action element. When not scoped, this works fine. The problem come when the #admin component styling is scoped.

Is there any way to do that while keeping the .actions style inside the admin component scoped style tag?

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:

<style scoped>
.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:

<style lang="scss" scoped>
  #admin {
    some-property: some-style;

    /deep/ .actions {
      some-property: some-style;
    }
  }
</style>

Scoped CSS, When a <style> tag has the scoped attribute, its CSS will apply to elements of the current component It is achieved by using PostCSS to transform the following: You can include both scoped and non-scoped styles in the same component:. the problem style defined in #admin not applied .action element. when not scoped, works fine. problem come when #admin component styling scoped. is there way while keeping .actions style inside admin component scoped style tag?

You can put styles in a separate file and reference it from all components that need it:

<style src="path/to/your/styles" lang="scss" scoped></style>

How to make your components dynamic in Vue.js, To use the Vue router, define routes in a routes component and indicate to Vue that the You can use conditional structures to achieve dynamic components by using a Add "scoped" attribute to limit CSS to this component only --> <style scoped> h3 You'll see that only the Test 1 component shows up. 0 How to apply Vue.js scoped styles to components loaded via view-router? Feb 21 '19. Badges (9) Gold

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.

Vue.js, Every new Vue.js application created by vue-cli comes with two great built-in It will apply our styles only to elements in the same component by using view raw scoped-css-example-1-output.html hosted with ❤ by GitHub. A working demo of this example can be found here. # Nested Named Views It is possible to create complex layouts using named views with nested views. When doing so, you will also need to name nested router-view components used.

Chapter 7. Advanced components and routing, Working with slots; Using dynamic components; Implementing async Each chunk will load only when needed—a nice addition when our application grows large and to make sure content is shown is to use the slot element, as we'll see next. Add "scoped" attribute to limit CSS to this component only --> <style scoped>� Migration from Vue Router 0.7.x. Only Vue Router 2 is compatible with Vue 2, so if you’re updating Vue, you’ll have to update Vue Router as well.

How to use routing in Vue.js to create a better user experience, We will be using vue-cli to generate a new Vue.js project. Add "scoped" attribute to limit CSS to this component only --><style scoped> We will di scuss rout e-view in the next part when we use the animation transition . javascript - How to apply Vue.js scoped styles to components loaded via view-router? - 03:22 0 Get link; Facebook; Twitter; Pinterest; Email; Other Apps;

Load a global settings.scss file in every vue component? � Issue , Use vue cli 3 to set up the various webpack configurations I have both vue. config.js file and sass-loader and node-sass loader module (Excludes mixins and Vars loaded via sass-resources-loader) @import '. Add "scoped" attribute to limit CSS to this component only --> <style "vue-router": "^3.0.1", A little context: I am opening this question arose here, after solving an authentication problem. I prefer to open a new one to avoid polluting the previous with comments not related to the original issue, and to give it the proper visibili

Comments
  • Webpack is just spitting out the >>> as-is for me. Is there something special I have to do in webpack.config.js?
  • @333 what preprocessor are you using? (if any at all)
  • At the risk of sounding like a child, I don't know ... my vue-loader options look like this: { loaders: { scss: "vue-style-loader!css-loader!sass-loader" } }
  • @333 No worries! So it looks like you're using Sass (and probably SCSS specifically) so in your Vue file if you have <style lang="scss"> you'd have to use the /deep/ combinator as seen in my second code example, instead of the >>> example.
  • It's still spitting it out verbatim for me.
  • Thank you! That was an excellent answer. Not sure why anyone else doesn't like it!
  • This is not a good solution, it creates multiple style tags on head, and you can't add any rules to this style.
  • You have probably multiple style tags in development mode. In production, it depends on how you configure the chunks with Webpack.