Passing variable to SASS with Grunt

Question

I want to be able to "@import" a file with SASS depending on a Grunt parameter.

With grunt I want to:

grunt someTask --skinName=yellow

Inside app.scss I want to somehow use this parameter:

@import "$skinName";

Some context...

This skinName.scss contains a lot of SASS variables with color codes so that I can easily change colors all over the app. I Should be included before all my SASS @imports.

Answer 1

You could solve this with another scss file that is written by grunt during the build process:

grunt.registerTask('skin', function () {
    grunt.file.write('skin.scss', '@import "' + grunt.option('skinName') + '";');
});

Then simply import the skin.scss in your app.scss.