时间戳

首页 > 解决方案 > webpack4 vue 父组件覆盖子组件的样式

vue.js - webpack4 vue 父组件覆盖子组件的样式

问题描述

父组件（父组件）

<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>

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

标签： vue.jswebpack-4mini-css-extract-plugin

解决方案

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

  1. 你声明你的父组件。
  2. 您的父组件包括您的子组件。
  3. Webpack 查找您的子组件并对其进行处理，以便您的父组件可以使用它。
  4. 在处理它时，子组件的 CSS 被添加到您的样式表包中。
  5. 您的父组件现在已完全处理，已添加到您的样式表包中。
  6. 由于级联样式表的性质，您的父样式低于您的子样式，使其优先于它们。

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

推荐阅读