Is there a way to dynamically pass sass variables from the father component to the son component in Vue.js, which operates on a webpack configuration?
In the father component, I have access to the $color variable from the style tag. The son component is called using the following HTML template:
// father component
<template>
<son></son>
</template>
<style lang='sass' scoped>
@import 'assets/sass/color';
</style>
The imported sass variable, $color, needs to be passed from the father component to change the background of the son component.
Let's assume that the son component is just a simple div:
// son component
<template>
<div></div>
</template>
<style lang=sass scoped>
div {
width: 200px;
height: 200px;
}
</style>
What would be the correct way to achieve this in Vue.js?