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 understanding the ExtractTextPlugin
seems to be my best bet as I don't want my styles to be inlined and rather have separate files per theme.
So I created two themes:
src/scss/themes/theme-a.scsssrc/scss/themes/theme-b.scss
The themes import the basic layout and common styles and override the relevant variables.
But the only way I managed to make webpack create separate css files for both themes was to create distinct entry points for each theme inmy webpack.prod.config
:
entry: { app: './src/js/init.js', theme-a: './src/scss/themes/theme-a.scss', theme-b: './src/scss/themes/theme-b.scss'},
But adding a new entry point for every new theme that gets added feels wrong and I figure there must be a better way?