Javascript 如何在VueJS中扩展样式？

我有一些基类组件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>

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

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

布拉布拉
从“Vue”导入Vue；
从“vue属性装饰器”导入{Component}；
@组件（{}）
导出默认类基扩展Vue{}
//未限定范围
.沟通{
颜色：红色；
}

儿童1部分：

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

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

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

从“Vue”导入Vue；
从“vue属性装饰器”导入{Component}；
从“/Base.vue”导入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>

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

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

从“Vue”导入Vue；
从“vue属性装饰器”导入{Component}；
从“/Base.vue”导入Base；
@组件（{}）
导出默认类Child2扩展基{}
.沟通{
颜色：绿色；
}

颜色始终为蓝色，事件位于Child2组件中

---

关于

不幸的是，目前不可能。有关

vue加载程序

，请参阅以下问题：

作为一种变通方法，您可以使用

sass

预处理器，例如，以便重用子组件的样式