CODEWITHSUNDEEP
javascriptcssvue.jssassvuejs2
Mohsen Dehghani
Mohsen Dehghani

Reputation: 83

Import scss file dynamically in vue js

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.

Upvotes: 4

Views: 982

Answers (1)

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23500

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>

Upvotes: 2

Related Questions