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

Here's your solution:

npm i --save-dev file-loader

In the loaders section, add this:

{
    test: /themes\/.+\.scss$/,
    loader: "file-loader?name=./compiled-themes/css/[name].css!css!sass"
},

There may be more scss files, if so there must be another section which bundles them as usual, but skips the themes:

{
    test: /\.scss$/,
    exclude: /themes\/.+\.scss$/,
    loader: "css!sass"
},

The file loader writes files by filename, hash and extension so you are able to preserve the name.

Note the name=./compiled-themes/css/[name].css part, where [] vars are substituted.

https://github.com/webpack/file-loader