i am working on a Vuejs project and, I would like to import ".scss" files dynamicly during script. for example I would like to import "assets/sass/style.scss" in the style tag without writing any codes in the style tag. I would like to handle it in the script section.
check below codes:
<style lang="scss">
@import "assets/sass/plugins";
@import "assets/sass/style";
//@import "assets/sass/plugins.dark";
//@import "assets/sass/style.dark";
</style>
This styles are retaled to dark mode and light mode. sometimes i need to use light and sometimes dark and i can not use both at the same time. so need wtite script to do this.
Try to wrap CSS imports in a class:
<style lang="scss">
.light {
@import "assets/sass/plugins";
@import "assets/sass/style";
}
.dark {
@import "assets/sass/plugins.dark";
@import "assets/sass/style.dark";
}
</style>
And then use class binding for that class:
<div :class="isDark ? 'dark': 'light'">
...
</div>