webpack4 vue The parent component covers the style of the child component

Question

父组件 (Parent component)

<template>
  <children></children>
</template>

<script>
import children from './children'
export default {
  components: {
    children
  }
}
</script>

<style lang="less">
.desc {
  color: red;
}
</style>

子组件 (Child component)

<template>
  <p class="desc">文案</p>
</template>

<style lang="less">
.desc {
  color: yellow;
}
</style>

The display color is the color set for the parent component. There is a problem with the loading order of the parent component and the child component styles. Is it the packaging problem?

Using scoped can be avoided, but it is reasonable to say that the parent component should not cover the style of the component, the priority is not right, and the order of the packaged CSS is not right。 — Magic Era, Nov 11 '19 at 03:59

score 1 · Answer 1 · answered Nov 11 '19 at 06:27

The order in which your elements are packaged is correct:

You declare your parent component.
Your parent component includes your child component.
Webpack looks for your child component and processes it, so it will be available for your parent.
While processing it, the child component's CSS is added to your stylesheets bundle.
Your parent component, now completely processed, is added to your stylesheets bundle.
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.

webpack4 vue The parent component covers the style of the child component

1 Answers1