title: Webpack combine sass components into one css file
body: <p>I have the following in my react component:</p>
  
  <pre><code>var webpack = require('webpack');
  var path = require('path');
  
  var BUILD_DIR = path.resolve(__dirname, 'public/js/');
  var APP_DIR = path.resolve(__dirname, 'jsx');
  
  var config = {
      entry: APP_DIR + '/index.jsx',
      output: {
          path: BUILD_DIR,
          filename: 'app.js'
      },
      module : {
          loaders : [
              {
                  test : /\.jsx?/,
                  include : APP_DIR,
                  loader : 'babel'
              },
              {
                  test: /\.scss$/,
                  loaders: ['style', 'css', 'sass']
              },
              {
                test: /\.(eot|woff|woff2|ttf|svg|png)$/,
                loader: 'url-loader?limit=30000&amp;name=[name]-[hash].[ext]'
              }
          ]
      }
  };
  
  module.exports = config;
  </code></pre>
  
  <p>is it possible to combine all of the scss components into one .css file? Currently they are inserted inline because of me doing this:</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom'
  import {render} from 'react-dom';
  
  import axios from 'axios';
  
  import Forms from './forms/forms.jsx';
  
  import './../public/sass/typography.scss';
  import './../public/sass/main.scss';
  import './../public/sass/navigation.scss';
  import './../public/sass/buttons.scss';
  import './../public/sass/forms.scss';
  import './../public/sass/icons.scss';
  import './../public/sass/layout.scss';
  </code></pre>