Применение стилей в Webpack 4

У меня большие проблемы с применением классов к моим элементам ul в React с использованием SCSS и Webpack 4. Я обновил свой проект до Webpack 4 (#yesiamstupid)

Если я помечу тип элемента (ul), он будет работать. Однако мой собственный класс "navMenu" никогда не применяется. Я вижу класс в инструментах веб-разработчика -> styles.scss

Я ожидаю, что фон текста в навигации будет синим.

[app.js]

import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import AppRouter from './routers/AppRouter';

import 'normalize.css/normalize.css';
import './styles/styles.scss';

const jsx = (
  <Provider>
    <AppRouter />
  </Provider>
);

ReactDOM.render(jsx, document.getElementById('app')); 

[AppRouter.js]

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import StartPage from '../components/StartPage';
import Header from '../components/Header';

const AppRouter = () => (
  <BrowserRouter>
    <div>
      <Header />
      <Switch>
        <Route path = "/" component = {StartPage} exact = {true} />
      </Switch>
    </div>
  </BrowserRouter>
);

export default AppRouter;

[StartPage.js]

import React from 'react';

const StartPage = () => (
  <div>
    Hello
  </div>
);

export default StartPage;

[Header.js]

import React from 'react';
import { NavLink } from 'react-router-dom';

const Header = () => (
  <header>
    <h1>Test WP4</h1>
    <ul className = "navMenu">
      <li><NavLink to = "/" activeClassName = "is-active" exact = {true}>Here we are</NavLink></li>
      <li><NavLink to = "/undefined" activeClassName = "is-active" exact = {true}>This route is undefined</NavLink></li>
    </ul>
  </header>
);

export default Header;

[_base.scss]

html {
  font-size: 62.5%;
}

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: $m-size;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: default;
}

.is-active {
  font-weight: bold;
}

[_settings.scss]

// Colors
// Spacing
$s-size: 1.2rem;
$m-size: 1.6rem;
$l-size: 3.2rem;
$xl-size: 4.8rem;
$desktop-breakpoint: 45rem;

[_header.scss]

ul {
  list-style-type: circle;
}

.navMenu {
  text-align:center;
  background:blue;
  padding-top:400px;
}

[styles.scss]

@import './base/settings';
@import './base/base';
@import './components/header';

[webpack.config.js]

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = () => {
  return {
    watch: true,
    //mode: 'development',
    entry: ['babel-polyfill', './src/app.js'],
    output: {
      path: path.join(__dirname, 'public', 'dist'), //absolute path
      filename: 'bundle.js' //name is whatever you want
    },
    module: {
      rules: [{
        loader: 'babel-loader',
        test: /\.js$/,
        exclude: /node_modules/
      }, {
        test: /\.svg$/,
        loader: 'raw-loader'
      }, {
        test: /\.(sa|sc|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
        ],
      }

      ]
    },
    plugins: [
      new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        filename: "style.css",
        //chunkFilename: "chunk.css"
      })
    ],
    devtool: 'inline-source-map',
    devServer: {
      contentBase: path.join(__dirname, 'public'), //absolute path
      historyApiFallback: true, //go to index if path not found
      publicPath: '/dist' //specify where bundle files liveY
    }
  };
}