I'm facing a scope issue while learning Vue.
Question:
I am trying to make sure that the styles in profile.vue do not override the ones in sidebar.vue. I want the sidebar to have a red background and the profile section to be blue. Shouldn't using scoped within the style tag take care of this?
Output: https://i.sstatic.net/3XFdz.png
Profile.vue below:
<template>
<main>
<section>
Test
</section>
<Sidebar></Sidebar>
</main>
</template>
<script>
import Sidebar from "../../components/sidebar/Sidebar";
export default {
name: "Profile",
components: {Sidebar}
}
</script>
<style scoped lang="scss">
main {
width: 100%;
@include flex();
section {
width: 100%;
background: blue;
margin-left: $size*5;
}
}
</style>
Sidebar.vue below:
<template>
<section>
Test
</section>
</template>
<script>
export default {
name: "Sidebar"
}
</script>
<style scoped lang="scss">
section {
max-width: ($size*45);
width: 100%;
background: red;
}
</style>