webpack4 vue父组件包含子组件的样式

Question

父组件（父组件）

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

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

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

子组件（子组件）

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

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

显示颜色是为父组件设置的颜色。父组件和子组件样式的加载顺序存在问题。是包装问题吗？

Answer 1

打包元素的顺序是正确的：

1. 您声明父组件。
2. 您的父组件包括您的子组件。
3. Webpack查找您的子组件并对其进行处理，因此您的父组件将可以使用它。
4. 在处理它时，子组件的CSS被添加到样式表包中。
5. 您的父组件（现已完全处理）已添加到样式表包中。
6. 根据层叠样式表的性质，您的父样式低于您的子样式，因此优先于子样式。

为避免这种情况，您需要在样式中使用scoped关键字。