Using grunt-contrib-sass to compile to multiple destinations relative to their sources (recursively)

Question

I have a huge stylesheet codebase with many .scss files in multiple folders and subfolders that I want to compile to .css files. So far so good.

But for whatever reason I need the .css files to be compiled into a different destination folder than the .scss files in each source folder.

The source paths I have:

• src/project-1/scss/project-1.scss
• src/project-2/subfolder/scss/project-2.scss

The destination paths I need:

• src/project-1/css/project-1.css
• src/project-2/subfolder/css/project-2.css

My grunt task setup is this:

sass: {
    prod: {
        options: {
            style: 'expanded'
        },
        files: [{
            expand: true,
            cwd: 'src',
            src: ['**/*.scss'],
            dest: 'src',
            ext: '.css',
        }]
    }
}

This setup compiles each .css file to the same folder as the .scss files. I need them out from the "scss" folder and into a "css" folder in the same parent folder.

Searching for a solution:

I tried different values in the dest field without any luck.

I tried using grunt-contrib-copy and a rename() function:

copy: {
    target: {
        files: [{
            expand: true,
            cwd: 'src',
            src: ['**/*.css'],
            dest: 'src/',
            rename: function(dest, src) {
                return dest + src.replace(/\/scss\/$/, "/css/");
            }
        }]
    }
}

The latter "almost" works. I am copying the files to their own destination and at the same time trying to rename the "scss" folder to "css", but the replace function doesn't seem to concider the folder names in the source path, only the file names.

Am I close to a workaround or am I heading towards a dead end here?

EDIT: solution found

I did some small changes to the rename function which solved my problem:

sass: {
    prod: {
        options: {
            style: 'expanded'
        },
        files: [{
            expand: true,
            cwd: "src",
            src: ["**/*.scss"],
            dest: "src/",
            ext: ".css",
            rename: function (dest, src) {
                return dest + src.replace('scss', 'css'); // The target file is written to folder "css" instead of "scss" by renaming the folder
            }
        }]
    }
}

This is giving me the compiled CSS inside a new /css folder on the same level as the source /scss folder.

For example:

src/project-1/scss/project-1.scss is compiled to src/project-1/css/project-1.css.

I am also using the exact same files: [{...}] settings for my grunt-autoprefixer and grunt-contrib-cssmin tasks, and it all writes to the same folder and file.