如何在VueJS中扩展样式？

Question

我有一些基类component base和子组件Child1和Child2。我在基本组件中也有一些基本样式，但我想在子组件中覆盖它。它不能像我预期的那样工作，因为一个子组件的样式覆盖了另一个子组件的样式。

基础组件：

<template>
<div class="communicate">
   Blabla
</div>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component } from 'vue-property-decorator';

@Component ({})
export default class Base extends Vue {}
</script>

<style lang="scss">
//not scoped
.communicate {
   color: red;
}
</style>

子组件1：

<script lang="ts">
import Vue from 'vue';
import { Component } from 'vue-property-decorator';
import Base from './Base.vue';

@Component ({})
export default class Child1 extends Base {}
</script>

<style lang="scss" scoped>
.communicate {
   color: blue;
}
</style>

和类似的Child2组件：

<script lang="ts">
import Vue from 'vue';
import { Component } from 'vue-property-decorator';
import Base from './Base.vue';

@Component ({})
export default class Child2 extends Base {}
</script>

<style lang="scss" scoped>
.communicate {
   color: green;
}
</style>

颜色始终为蓝色，这是Child2组件中的事件。

问候

Answer 1

不幸的是，目前这是不可能的。请参阅以下有关vue-loader的问题：https://github.com/vuejs/vue-loader/issues/1003

作为一种解决办法，您可以使用sass预处理器，以便在子组件中重用样式。