title: How to bundle up a library's css into bundle.js using Webpack 2?
body: <p>I'm trying to do a very basic setup for my frontend frameworks using Webpack 2. I want to bundle up <a href="https://github.com/material-components/material-components-web" rel="nofollow noreferrer">material-components-web</a> and it's css but I can't figure out how to bundle the CSS too.</p>
  
  <p>I expect to have a <code>bundle.js</code> that I can load on an HTML file and be able to call <code>mdc</code> components. Here's my <code>webpack.config.js</code></p>
  
  <pre><code>const path = require('path');
  
  module.exports = {
      entry: './index.js',
      output: {
          path: path.resolve(__dirname, 'assets/communications/js'),
          filename: 'bundle.js'
      },
      module: {
          loaders: [
              {
                  test: /\.js$/,
                  loader: 'babel-loader',
                  exclude: /node_modules/
              },
              {
                  test: /\.css$/,
                  loader: 'css-loader',
                  exclude: /node_modules/
              }
          ]
      }
  };
  </code></pre>
  
  <p>And here's my entry file <code>index.js</code></p>
  
  <pre><code>import * as mdc from 'material-components-web';
  </code></pre>
  
  <p>The problem is that I am a little bit lost on how should I bundle the CSS. The syntax is probably something similar to <code>@import "material-components-web/material-components-web";</code> But I'm not sure where should I put it, is it on the <code>index.js</code> file, or should I create a <code>styles.scss</code> file and import that one on <code>index.js</code> etc. I'm overall lost.</p>
  
  <p>The reason for this setup is because our codebase use components from <a href="https://github.com/google/material-design-lite" rel="nofollow noreferrer">material-design-lite</a>, <code>jQuery</code> and <code>Bootstrap</code> but it doesn't have a build task yet, so this is kind of like the first step.</p>