title: Extract CSS from SCSS and deferred lazy load in React app
body: <p>I have a few SCSS theme files I want to extract to CSS files and later load them into the page. I want to be able to use <code>contenthash</code> for long term caching.</p>
  
  <p>Since I'm using Webpack 4, I am also using <a href="https://github.com/webpack-contrib/mini-css-extract-plugin" rel="noreferrer">mini-css-extract-plugin</a>. I started down the path of creating a splitChunks in my webpack config.</p>
  
  <pre><code>// webpack.config.js
  module.exports = {
    plugins: [
        new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        filename: "[name].[contenthash].css",
        chunkFilename: "[id].[contenthash].css"
      })
    ],
    optimization: {
      splitChunks: {
        cacheGroups: {
          'vendor': {
              // custom commons chunk for js
          },
          'theme-a': {
              test: /theme-a.\scss/,
          },
          'theme-b': {
              test: /theme-b.\scss/,
          },
          // more themes
        }
      }
    }
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: [
            MiniCssExtractPlugin.loader,
            "css-loader",
            "sass-loader"
          ]
        }
      ]
    }
  }
  </code></pre>
  
  <p>I've then tried <a href="https://webpack.js.org/guides/code-splitting/#dynamic-imports" rel="noreferrer">dynamically importing</a> the css in my app:</p>
  
  <pre><code>// app.js
  class App extends React.Component {
    // constructor
  
    login(themeName) {
      import(/* webpackChunkName: "`${themeName}`" */ `./path/to/${themeName}.scss`).then(theme =&gt; {
        // do something with `theme`
      }
    }
  
    // other stuff
  }
  </code></pre>
  
  <p>I need to be able to load that css file dynamically in <code>login()</code> and I'm just not sure how to reference it when it has a generated <code>[contenthash]</code>.</p>
  
  <h3>TLDR: Is there a good way to both extract css and import the referenced CSS bundle to lazy load later? I'm not tied to <code>mini-css-extract-plugin</code>.</h3>
  
  <p>Edit: Created a <code>mini-css-extract-plugin</code> issue <a href="https://github.com/webpack-contrib/mini-css-extract-plugin/issues/105" rel="noreferrer">here</a>.</p>