Ionic+Capacitor+Angular - Change variables.scss file for each Android Studio Flavor

With Ionic+Capacitor+Angular, I'm trying to create a white-label app with two flavors using Android Studio Flavors.

This is what I included in my app/build.gradle:

flavorDimensions "default"
productFlavors {
flavor1 {
dimension "default"
resValue "string", "app_name", "flavor1"
resValue "string", "title_activity_main", "Flavor 1"
applicationId "com.test.flavor1" // Bundle ID
}
flavor2 {
dimension "default"
resValue "string", "app_name", "flavor2"
resValue "string", "title_activity_main", "Flavor 2"
applicationId "com.test.flavor1" // Bundle ID
}
}


Everything works fines when I build both flavors inside Android Studio > Build Variants



The problem starts now.

For each flavor I need to use differents color themes, and these colors need to be defined in app/theme/variables.scss, inside my Ionic project.



So, I need to have 2 variables.scss files, each one with its customs colors and classes for each flavor. Like this one below:



I guess my question is: How can I change the variable.scss file whitout using scripts or angular configurations during the building?

I need a way to change the file depending on the Build Variant I chose inside Android Studio. Is that even possible?

Continue reading...