title: Controlling CSS chunk names from a React component in Webpack 4
body: <p>I recently moved a Webpack configuration from version 1 to version 4.</p>
  
  <p>The application is a ReactJS project which internally uses <a href="https://github.com/jamiebuilds/react-loadable" rel="nofollow noreferrer">react-loadable</a> to obtain code splitting.
  I was able to use this also on webpack 1 thanks to the old <code>babel-plugin-dynamic-import-webpack</code>.</p>
  
  <p>All was working perfectly, although I had no way to control chunk names with the <em>webpackChunkName</em> magic comment (the comment itself was ignored as not supported by webpack).</p>
  
  <pre class="lang-jsx prettyprint-override"><code>import React from 'react';
  import Loadable from 'react-loadable';
  import Loading from 'components/Loading';
  
  const LoadableComponent = Loadable({
    loader: () =&gt; import(/* webpackChunkName: "carousel" */'./CarouselWidget'),
    loading: Loading
  });
  
  export default (props) =&gt; (
    &lt;LoadableComponent {...props} /&gt;
  );
  </code></pre>
  
  <p>After migrating to version 4 I gained also the chunk naming feature and additional split points as some of the subcomponents loaded asynchronously with <code>react-loadable</code> were importing SASS resources:</p>
  
  <pre class="lang-jsx prettyprint-override"><code>import 'slick-carousel/slick/slick.scss';
  import 'slick-carousel/slick/slick-theme.scss';
  
  import React, { PureComponent, PropTypes } from 'react';
  
  export default class CarouselWidget extends Component {
  </code></pre>
  
  <p>On webpack 1 those resources were merged in the main CSS bundle, while on version 4 they are extracted as separate resource.</p>
  
  <p>This is amazing and working smoothly, but I didn't find a way to customize CSS names generated by those chunks, as I get something like <code>6.927654d0493ed4acf802.css</code>.</p>
  
  <p>In my webpack config I'm using custom CSS and chunk names:</p>
  
  <pre class="lang-jsx prettyprint-override"><code>  get cssFilename() {
      return `[name]-${appVersion}.css`;
    }
  
    get chunkFilename() {
      return 'something-[name]-[chunkhash].chunk.js';
    }
  </code></pre>
  
  <p>This configuration if working properly for JS chunks and main CSS filenames, but not taken by SCSS above.</p>
  
  <p>What I'm missing? There's a way to customize those CSS chunks?
  I also tried some additional plugins, like <code>babel-plugin-universal-import</code> with no luck.</p>