How to extract multiple theme stylesheets with webpack?

Question

I am trying to make a React app themeable. For now themes only consist of different sets of Sass variables which define different header colors, etc.

From my current und

Answer 1

To avoid having to manually add the themes one possible solution is to create a function that reads contents of the themes folder and programatically add an entry for each *.scss file.

Something along the lines of this:

function getThemes(themePath) {
    var themes = {};
    fs.readdirSync(themePath).forEach(function(fileName) {
        var fileNameWithPath = path.join(themePath, fileName);

        var stat = fs.lstatSync(fileNameWithPath);
        if (stat.isDirectory()) return;
        if (!/\.scss$/.test(fileName)) return;

        var nameWithoutExt = path.basename(fileName, '.scss');
        themes[nameWithoutExt] = fileNameWithPath;
    });

    return themes;
}

var themes = getThemes('./src/scss/themes');

var config= {
    entry: _.merge({ app: './src/js/init.js' }, themes),
    // rest of options
};

This will require you to restart your dev-server or re-run you webpack build when adding new theme files though, but at least you won't have to touch your webpack config.