Webpack combine sass components into one css file - sass

Question

I have the following in my react component:
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&name=[name]-[hash].[ext]'
}
]
}
};
module.exports = config;
is it possible to combine all of the scss components into one .css file? Currently they are inserted inline because of me doing this:
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';