webpack4 vue Родительский компонент охватывает стиль дочернего компонента. - PullRequest
Новая
       67

webpack4 vue Родительский компонент охватывает стиль дочернего компонента.

0 голосов
/ 11 ноября 2019

父 组件 (родительский компонент) 

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

Цвет отображения - это цвет, установленный для родительского компонента. Существует проблема с порядком загрузки родительского компонента и стилей дочернего компонента. Это проблема упаковки?

1 Ответ

0 голосов
/ 11 ноября 2019

Порядок, в котором упакованы ваши элементы, является правильным:

  1. Вы объявляете свой родительский компонент.
  2. Ваш родительский компонент включает ваш дочерний компонент.
  3. Webpackищет ваш дочерний компонент и обрабатывает его, поэтому он будет доступен для вашего родителя.
  4. При обработке CSS-код дочернего компонента добавляется в ваш пакет стилей.
  5. Теперь ваш родительский компонентполностью обработанный, добавляется в ваш пакет таблиц стилей.
  6. По характеру каскадных таблиц стилей ваш родительский стиль находится ниже вашего дочернего стиля, что делает его приоритетным над ними.

Чтобы избежать этого, вам нужно использовать ключевое слово scoped в вашем стиле.

...