Почему ExtractTextPlugin создает пустой файл css через плагин? Почему загрузчик sass предоставляет пустые объекты при импорте с помощью Webpack?

Я настроил веб-пакет для использования ExtractTextPlugin для создания одного файла css из sass, а также для того, чтобы он был доступен в приложении reactjs через импорт через загрузчик веб-пакетов.

Использование файлов sass обнаруживается с помощью оператора импорта в компоненте реакции, и создается выходной файл, однако сгенерированный файл main.css пуст, а импорт возвращает пустой объект стиля, кто-нибудь знает, что я делаешь неправильно?

Структура

client
  - app
    - components
      - navbar
        Navbar.js
        navbar.scss
  - public
    - styles
      main.scss
    bundle.js
    index.html

Конфигурация веб-пакета

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const BUILD_DIR = path.resolve(__dirname, 'public');
const APP_DIR = path.resolve(__dirname, 'app');

const config = {
   entry: APP_DIR + '/index.js',
   output: {
     path: BUILD_DIR,
     filename: 'bundle.js'
  },
  externals: {
    'cheerio': 'window',
    'react/lib/ExecutionEnvironment': true,
    'react/lib/ReactContext': true,
  },
  module : {
    loaders : [
      {
        test : /\.jsx?/,
        include : APP_DIR,
        loader : 'babel'
      },
      {
        test: /\.scss$/,
        include : APP_DIR,
        loader: ExtractTextPlugin.extract('css!sass')
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'My App'
    }),
    new ExtractTextPlugin('styles/main.css', {
      allChunks: true
    })
  ]
};

module.exports = config;

navbar.scss

.navbar {
  display: flex;

  .navbarBrand {

  }
}

Navbar.js

import React, { Component, PropTypes } from 'react'
import classnames from 'classnames'
import Login from '../login/Login'
import Logout from '../logout/Logout'
import styles from './navbar.scss';


export default class Navbar extends Component {

  render() {
    const { isAuthenticated, errors, onLogin, onLogout } = this.props;

    console.log(styles);
    const navBarStyles = classnames(styles.navbar);
    const navBarBrandStyles = classnames(styles.navbarBrand);

    return (
        <nav className={navBarStyles}>
          <div className='container-fluid'>
            <a className={navBarBrandStyles} href="#">User Management App</a>
            <div className='navbar-form'>

              {!isAuthenticated &&
                <Login
                    errors={errors}
                    onLoginClick={ (creds) => onLogin(creds) }
                />
              }

              {isAuthenticated &&
                <Logout onLogoutClick={() => onLogout()} />
              }

            </div>
          </div>
        </nav>
    )
  }
}

Navbar.propTypes = {
  isAuthenticated: PropTypes.bool.isRequired,
  errors: PropTypes.arrayOf(PropTypes.string),
  onLogin: PropTypes.func.isRequired,
  onLogout: PropTypes.func.isRequired
};

Симптомы

Загрузчики и импорт (Больше НЕ проблема, см. ответ ниже)

1. console.log(стили) = Объект {}

2. стили.navbar = не определено

Плагины

1. public/styles/main.css пуст (Больше НЕ проблема, см. ответ ниже)

Вопросы

1. Почему стиль является пустым объектом при его импорте в Narbar.js? Что я неправильно настроил? (Я нашел решение и предоставил ответ ниже в разделе ответов)
2. Почему public/style/main.css пуст? (Я нашел решение и предоставил ответ ниже в разделе ответов)