Import file based on condition - scss

Question

I have a site that has 2 themes and I am trying to setup my config based on the theme, which currently is set as the body ID.

Am I able to import file in based on this condition? Something like this:

#theme1 {
   @import "components/theme-one-styling";
}
#theme2 {
   @import "components/theme-two-styling";
}

Hope this makes sense

Thanks

Answer 1

I am not sure how to do that, but another solution to your question is, having 2 seperate mixins for the themes, have it in the same file and include that mixin in your component scss. Something like this:

Step 1: Common File called components/themes

@mixin theme-1-mixin() {
 /// write your code for theme 1
}

@mixin theme-2-mixin() {
 /// write your code for theme 2
}

In your component scss file, do this:

@import 'components/themes';

#theme1 {
  @include theme-1-mixin();
}

#theme2 {
  @include theme-2-mixin();
}

Not sure if this will solve the problem or not but just another solution.