Import scss file dynamically in vue js

Question

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.

Nikola Pavicevic · Accepted Answer · 2022-04-23 15:40:40Z

2

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>

answered Apr 23, 2022 at 15:40

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mohsen Dehghani Over a year ago

tnx for your replying. it doesn't work. because those imports are global and so many components are using them (style tag is not scoped). i have to add dark and light class to all tags to work.

Nikola Pavicevic Over a year ago

@Mohsen Dehghani hey mate, maybe if you put that class bind in app.vue on div with id="app" and not scope global div? Maybe if you use vuex create global state isDark...

Mohsen Dehghani Over a year ago

yes. i have done the exactly thing what you said. but it is worked with some components not all of them. and font not loaded too for any of them. haven't you got any solution for importing with script?

Nikola Pavicevic Over a year ago

I think that maybe the problem is in your components scoped styles which overrides global ones.

Collectives™ on Stack Overflow

Import scss file dynamically in vue js

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related