In my project, I have two distinct layouts that function as separate parent routes with multiple nested components. I want to apply different global styles to each layout, but when I import styles for one layout, it affects the other as well:
<style type="scss">
@import "sass/first.scss";
</style>
The issue arises because the imported styles are global and impact classes from the other layout. One potential solution is using scoped styles:
<style type="scss" scoped>
@import "sass/first.scss";
</style>
However, scoped styles only affect parent elements and not all children, which means it doesn't work as intended. Is there a way to utilize separate global styles like this in vue.js applications?