Home » Android » android – Gradle – build sass per productflavor (multi folder)

android – Gradle – build sass per productflavor (multi folder)

Posted by: admin May 14, 2020 Leave a comment


We created an Android app with a webview which shows a local website from the assets folder.

The project has different Product Flavors to generate diffent apps with different styles and content but with the same codebas (native Java and HTML / JS).

For each flavor we want to define a diffent sass file with the colors and tweaks for that specific flavour.

I know that I need to create a task in gradle which builds the CSS files but I have no idea where to start:

  • How do I get the url of the assets folder of a specific flavour?
  • Can I use a special gradle plugin for building sass or do I have to create a task which executes the “sass” command?
  • When I use another gradle plugin like compass, how do I configure the right folders for each flavour? The plugin settings are in the top level and not in the Android plugin level.
How to&Answers:

I finaly have the solution!

Add this to your build.gradle in the main folder (not of your app):

buildscript {
    repositories {
        maven { url 'http://dl.bintray.com/robfletcher/gradle-plugins' }
    dependencies {
        classpath 'com.android.tools.build:gradle:1.3.0'
        classpath 'com.github.robfletcher:compass-gradle-plugin:2.0.6'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files

allprojects {
    repositories {

Add this the build.gradle of the app module:

apply plugin: 'com.android.application'
apply plugin: 'com.github.robfletcher.compass'

android {


    android.applicationVariants.all { variant ->
        for (output in variant.outputs) {
            def assetsDir = output.packageApplication.assets;
            tasks["merge${variant.name.capitalize()}Assets"].doLast() {
                println "Assets folder: " + assetsDir

                def _ccsDir = file("$assetsDir/css")
                def _sassDir = file("$assetsDir/sass")
                def _imagesDir = file("$assetsDir/images")
                def _javascriptsDir = file("$assetsDir/js")
                def _fontsDir = file("$assetsDir/fonts")

                project.compass {
                    cssDir = _ccsDir
                    sassDir = _sassDir
                    imagesDir = _imagesDir
                    javascriptsDir = _javascriptsDir
                    fontsDir = _fontsDir

I never thought it would work out but it works!