如何在 VueJS 中扩展样式？答案

【问题标题】：How to extend styles in VueJS?如何在 VueJS 中扩展样式？
【发布时间】：2018-10-21 16:09:40
【问题描述】：

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

基础组件：

<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 组件中的事件。

问候

【问题讨论】：

标签： javascript css vue.js vuejs2 styles

【解决方案1】：

很遗憾，目前不可能。 vue-loader请查看以下问题：https://github.com/vuejs/vue-loader/issues/1003

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

【讨论】：