title: CSS Code Splitting with Webpack 2 and React Router
body: <p>I'm code splitting my JavaScript files with React Router and Webpack 2 like this:</p>
  
  <pre><code>export default {
    path: '/',
    component: Container,
    indexRoute: {
      getComponent(location, cb) {
        if (isAuthenticated()) {
          redirect();
        } else {
          System.import('../landing-page/LandingPage')
            .then(loadRoute(cb))
            .catch(errorLoading);
         }
      },
    },
    childRoutes: [
      {
        path: 'login',
        getComponent(location, cb) {
          System.import('../login/Login')
            .then(loadRoute(cb))
            .catch(errorLoading);
        },
      },
      { /* etc */ 
      }
  };
  </code></pre>
  
  <p>Which results on this bundle:</p>
  
  <pre><code>public/
    vendor.bundle.js
    bundle.js
    0.bundle.js
    1.bundle.js
    2.bundle.js
  </code></pre>
  
  <p>Which means that the final user is getting only the JavaScript that he/she needs, according to the route that he/she is in.</p>
  
  <p><strong>The thing is: for the css part, I'm not finding any resource to do same thing, which is to split the CSS according the user's needs.</strong></p>
  
  <p>Is there a way to do it with Webpack 2 and React Router?</p>