title: CRA + Craco + multiple CSS themes
body: <p>Folder structure:</p>
  
  <pre><code>src/index.tsx
  src/themes/dark.scss
  src/themes/light.scss
  ...
  </code></pre>
  
  <p>craco webpack modifications:</p>
  
  <pre><code>const path = require('path');
  
  module.exports = {
    webpack: {
      configure: (webpackConfig, { env, paths }) =&gt; {
        webpackConfig.entry.push(
          path.join(process.cwd(), "src/themes/dark.scss"),
          path.join(process.cwd(), "src/themes/light.scss")
        );
  
        webpackConfig.module.rules.splice(1, 0, {
          test: /\.themes\/dark.scss$/,
          use: [
             { loader: require.resolve('sass-loader') },
             { loader: require.resolve('css-loader') }
          ]
        });
  
        webpackConfig.module.rules[3].oneOf[5].exclude = /\.(module|themes)\.(scss|sass)$/;
        webpackConfig.module.rules[3].oneOf[6].exclude = /\.themes\.(scss|sass)$/;
        webpackConfig.module.rules[3].oneOf[7].exclude.push(/\.themes\.(scss|sass)$/);
  
        return webpackConfig;
      }
    }
  };
  
  </code></pre>
  
  <p>the intent is I am hoping obvious - we are trying to generate two theme css files from <code>src/themes</code> directory, which will be later changed manually with unloading / loading <code>&lt;link</code> in DOM directly, I was inspired by <a href="https://stackoverflow.com/questions/50976979/output-2-or-more-css-files-with-mini-css-extract-plugin-in-webpack">Output 2 (or more) .css files with mini-css-extract-plugin in webpack</a> and <a href="https://github.com/terence55/themes-switch/blob/master/src/index.js" rel="nofollow noreferrer">https://github.com/terence55/themes-switch/blob/master/src/index.js</a>.</p>
  
  <p>Now comes the troubles - after build process:</p>
  
  <pre><code>Creating an optimized production build...
  Compiled successfully.
  
  File sizes after gzip:
  
    122.24 KB  build/static/css/2.2e93dcba.chunk.css
    762 B      build/static/js/runtime~main.a8a9905a.js
    191 B      build/static/css/main.d0c4fa77.chunk.css
    157 B      build/static/js/main.2063d3e0.chunk.js
    109 B      build/static/js/2.9b95e8c0.chunk.js
  </code></pre>
  
  <p>(CSS files are OK, there are few generic CSS files and few of them are from libraries). But no <code>theme</code> files... I try to combine with <code>file-loader</code>, but it does not work either.</p>