[Vuejs]-Webpack4 vue The parent component covers the style of the child component

1👍

The order in which your elements are packaged is correct:

  1. You declare your parent component.
  2. Your parent component includes your child component.
  3. Webpack looks for your child component and processes it, so it will be available for your parent.
  4. While processing it, the child component’s CSS is added to your stylesheets bundle.
  5. Your parent component, now completely processed, is added to your stylesheets bundle.
  6. By the nature of cascading stylesheets, your parent style is below your child style, making it priority over them.

To avoid this, you need to use the scoped keyword in your style.

Leave a comment