Estoy tratando de hacer que una aplicación React sea temible. Por ahora, los temas solo consisten en diferentes conjuntos de variables Sass que definen diferentes colores de encabezado, etc.

Desde mi comprensión actual, elExtractTextPlugin Parece ser mi mejor opción, ya que no quiero que mis estilos estén en línea y más bien tengan archivos separados por tema.

Entonces creé dos temas:

src/scss/themes/theme-a.scss
src/scss/themes/theme-b.scss

Los temas importan el diseño básico y los estilos comunes y anulan las variables relevantes.

Pero la única forma en que pude hacer que webpack creara archivos CSS separados para ambos temas fue crear puntos de entrada distintos para cada tema en miwebpack.prod.config:

entry: {
  app: './src/js/init.js',
  theme-a: './src/scss/themes/theme-a.scss',
  theme-b: './src/scss/themes/theme-b.scss'
},

Pero agregar un nuevo punto de entrada para cada nuevo tema que se agrega se siente mal y creo que debe haber una mejor manera.