Is it possible to extract a Vue component's scoped SCSS with deep selectors into a separate file and then import it back in?
For example:
// Main.vue
<template>
<div id="main">
<h1>Title</h1>
<span>Text</span>
</div>
</template>
<style lang="scss" scoped>
#main::v-deep {
&>h1 {
font-size: 10rem;
}
&>span {
font-size: 5rem;
}
}
</style>
Can this be achieved like so:
// Main.vue
...
<style lang="scss" scoped>
@import url('./Main.scss');
</style>
// Main.scss
#main::v-deep {
&>h1 {
font-size: 10rem;
}
&>span {
font-size: 5rem;
}
}
But without applying this style to components that might have an id/class of "main" elsewhere in the project? Just scoped to this specific component?