Webpack将sass组件合并到一个css文件中

Question

我的反应组件中有以下内容：

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;

是否可以将所有scss组件合并为一个.css文件？目前它们是内联插入的，因为我这样做：

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';