Inject css to a Vue component?

user_2631086 0
Viewed 5993

see below my-component.vue.This Component needs to be themable.

It needs to get extrenal css sheet as i need to allow other developers to customize its inner look.

Is there any other approach than accept a javascript object?

<template>
  <div class="container">
    <div class="A"></div>
    <div class="B"></div>
    <div class="C"></div>
  </div>
</template>

<style scoped>
  .A {
    background-color:green;
  }
  .B {
    background-color: red;
  }
  .C {
    background-color: yellow
  }
</style>
vue.js css javascript
2 Answers

You can use "deep" selector to override any styles inside "scoped" component styles.

<style scoped>
.a >>> .b { /* ... */ }
</style>

Details: vue-loader/deep-selector

user_5339760
Related