title: How to extend styles in VueJS?
body: <p>I have some base class component Base and child components called Child1 and Child2. I have some base styles in Base component also but I want to overwrite it in children. It does not work as I expect because one of child component's styles overwrites another child styles. </p>
  
  <p>Base component:</p>
  
  <pre><code>&lt;template&gt;
  &lt;div class="communicate"&gt;
     Blabla
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script lang="ts"&gt;
  import Vue from 'vue';
  import { Component } from 'vue-property-decorator';
  
  @Component ({})
  export default class Base extends Vue {}
  &lt;/script&gt;
  
  &lt;style lang="scss"&gt;
  //not scoped
  .communicate {
     color: red;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>Child 1 component:</p>
  
  <pre><code>&lt;script lang="ts"&gt;
  import Vue from 'vue';
  import { Component } from 'vue-property-decorator';
  import Base from './Base.vue';
  
  @Component ({})
  export default class Child1 extends Base {}
  &lt;/script&gt;
  
  &lt;style lang="scss" scoped&gt;
  .communicate {
     color: blue;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>and similar Child2 component:</p>
  
  <pre><code>&lt;script lang="ts"&gt;
  import Vue from 'vue';
  import { Component } from 'vue-property-decorator';
  import Base from './Base.vue';
  
  @Component ({})
  export default class Child2 extends Base {}
  &lt;/script&gt;
  
  &lt;style lang="scss" scoped&gt;
  .communicate {
     color: green;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>Color is always blue, event in Child2 component.</p>
  
  <p>Regards</p>